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

【问题标题】：Angular.js: How to change div width based on user inputAngular.js：如何根据用户输入更改 div 宽度
【发布时间】：2014-01-21 01:46:40
【问题描述】：

我有一个接受 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 的数量很高，这并不总是有效的。那么，问题又来了，如何通过 Angular 脚本做到这一点？

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

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

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

您还应该使用attrs.$observe 而不是$watch。

工作演示（更新）：http://jsfiddle.net/nidzix/UKHyL/40/

【讨论】：

奇怪。那是在小提琴中工作。但不是当带入我的代码时。当我不写“track by”时，它可以正常工作，否则不会。
您是否正确包含了 Angular 库、控制器和应用名称？
是的。脚本被正确调用，否则其余代码将无法正常工作。控制器和应用程序名称也很好。但是我在控制器之后放置了指令，可以吗？
是的，没关系。小提琴是完全透明的，所以没有隐藏代码，简单的复制粘贴应该可以工作。如果您的代码中有其他更改，它们也会对结果产生影响。
您好，抱歉回复晚了。事情是，我按原样复制了你的小提琴。所以在我的本地，当我删除 'track by $index' 部分时，它工作正常。但是当我在小提琴上移除相同的部分时，它没有反应。反之亦然。

【解决方案2】：

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

文档链接：http://docs.angularjs.org/api/ng.directive:ngStyle

【讨论】：

我读过很多次了，经常写内联样式不是一个好习惯。因此，如果您的元素要重复 100 次，那将不是一个好习惯。这就是为什么我要避免在这里编写内联样式。如果您使用的是 ng-style 可以吗？
编写内联样式通常不是一个好习惯，但在这种情况下，这是调整元素大小的唯一方法。至于 ng-style AFAIK，它仍然添加 style="" 但您可以将范围变量映射到它，以便您可以执行类似 ng-style="styles" 的操作并在范围内添加样式，例如： $scope.styles = {width : 东西 + 'px'}
{{cols}} 似乎不适用于较新的 Angular 版本。如果您遇到此问题，请改用(cols)。