Установите ширину div в «ширину отображения» div без свойства width.

Я использую ng-модель для привязки значения ввода к содержимому .one. У меня есть .one, настроенный с абсолютным положением и без установленной ширины, так что .one будет расширяться горизонтально, чтобы соответствовать контенту. Все это прекрасно работает.Установите ширину div в «ширину отображения» div без свойства width.

Теперь то, что я хотел бы сделать, это установить ширину .two быть равна ширине .one так, что ширина .two изменится содержание добавляется .one

Следующая не работа, я считаю, потому что .one не имеет свойства ширины:

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

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

можно ли получить ширину .one как он отображается, а не на основе его CSS ширины свойства?

Проверьте это: 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 без свойства width.

ответ

Смежные вопросы