我有一个输入框,它接受div宽度的值。 使用angular.js,如何根据用户输入更改div的宽度? 我在引用这个小提琴后实现了以下代码。http://jsfiddle.net/311chaos/vUUf4/4/
加价:
<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols" ng-change="flush()"/>
<div getWidth rowHeight=cols ng-repeat="div in divs">{{$index+1}} aaaaaa</div>
controller.js
var grid = angular.module('gridApp', []);
grid.controller('control', ['$scope', function ($scope) {
/* code for repeating divs based on input*/
$scope.divs = new Array();
$scope.create=function(){ //function invoked on button's ng-click
var a = $scope.cols;
for(i=0;i<a;i++)
{
$scope.divs.push(a);
}
alert($scope.divs);
};
}]);
grid.directive('getWidth', function () {
return {
restrict: "A",
scope: {
"rowHeight": '='
},
link: function (scope, element) {
scope.$watch("rowHeight", function (value) {
console.log(scope.rowHeight);
$(element).css('width', scope.rowHeight + "px");
}, false);
}
}
});
function appCtrl($scope) {
$scope.cols = 150; //just using same input value to check if working
}
更新 我的最终目标是设置div的宽度。当我调用内联CSS时,我会实现我想要的目标。
<div get-width row-height="{{cols}}" ng-repeat="div in divs" style="width:{{cols}}px">{{$index+1}} aaaaaa</div>
但如果div的数量很高,这并不总是有效的。那么,问题仍然存在,如何通过角度脚本来做到这一点?
答案 0 :(得分:31)
使用ng-style="{width: cols + 'px'}"
,而不是样式。
答案 1 :(得分:0)
您的角度语法中有错误。你应该使用
ng-repeat="div in divs track by $index"
此外,您应该使用attrs.$observe
代替$watch
。
工作演示(已更新):http://jsfiddle.net/nidzix/UKHyL/40/