将div的宽度设置为无宽度属性的div的“显示宽度”

我正在使用ng-model将输入的值绑定到.one的内容。我有.one设置绝对位置和没有设置宽度，所以.one将水平扩大，以适应内容。这一切工作正常。将div的宽度设置为无宽度属性的div的“显示宽度”

现在我想要做的是设置的.two宽度等于的.one宽度，这样的.two宽度将改变，因为内容被添加到.one

以下将不工作中，我认为，由于.one没有width属性：

var x = $(".one").width() 

$(".two").css("width", x + "px")

是否有可能按照其显示的，而不是根据它的CSS width属性来获得.one宽度是多少？

检查出来：FIDDLE

来源

2015-12-13 digglemister

您可以更新绑定到输入框KeyUp事件。

$('#input').keyup(function() { 
    // Get the width of .one 
    var oneWidth = $(".one").width(); 
    // Set the width of .two to the value stored in oneWidth 
    $(".two").width(oneWidth); 
});

来源

2015-12-13 01:36:15

您可以使用该指令ngKeyUp

<input ng-model="text" ng-keyup="update()" />

这是一个KEYUP事件角结合的正确途径。

https://jsfiddle.net/alvarojoao/kstmua9e/1/

var app = angular.module("turingApp", []); 
 

 
app.controller("turingController", ["$scope", function($scope) { 
 

 
    $scope.update = function() { 
 
    var oneWidth = $(".one").width(); 
 
    $(".two").width(oneWidth); 
 
    }; 
 
}]);

.one { 
 
    position: absolute; 
 
    background-color: orange; 
 
    height: 20px; 
 
} 
 

 
.two { 
 
    background-color: green; 
 
    height: 20px; 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body ng-app="turingApp" ng-controller="turingController"> 
 

 
    <input ng-model="text" ng-keyup="update()" /> 
 

 
    <div class="one">{{text}}</div> 
 

 
    <br/> 
 
    <br/> 
 
    <br/> 
 

 
    <div class="two"></div> 
 

 
</body>

来源

2015-12-13 02:19:00

@snookieordie请检查我的回答您的问题 –

将div的宽度设置为无宽度属性的div的“显示宽度”

回答

相关问题