Angular.js:如何根据用户输入更改div宽度

时间:2014-01-03 11:40:02

标签: javascript html css angularjs

我有一个输入框,它接受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的数量很高,这并不总是有效的。那么,问题仍然存在,如何通过角度脚本来做到这一点?

2 个答案:

答案 0 :(得分:31)

使用ng-style="{width: cols + 'px'}",而不是样式。

指向文档的链接:http://docs.angularjs.org/api/ng.directive:ngStyle

答案 1 :(得分:0)

您的角度语法中有错误。你应该使用

ng-repeat="div in divs track by $index"

此外,您应该使用attrs.$observe代替$watch

工作演示(已更新):http://jsfiddle.net/nidzix/UKHyL/40/