如何从数学表达式和另一个范围变量更新范围变量？

Question

不确定我是否清楚我的问题，但我真正想要的是用 ng-style 更新 ng-repeat 中每个 <li> 的 min-width 到等于 100 / array.length.

的百分比

我的第一个解决方案很简单：

<li ng-style="{'min-width': (100 / array.length) + '%'}">

这行得通，但我不喜欢视图中的数学表达式，我宁愿将它放在控制器中。内容如下：

$scope.percentage = (100 / $scope.array.length) + '%'

<li ng-style="{'min-width': percentage}"

这种方法的问题在于，当数组内容改变时，percentage 并没有改变。我可以将 $watchCollection 添加到 array 并在那里更新 percentage，但感觉不对，就像我缺少更好的方法一样。我是吗？

如果不是，您更喜欢哪种解决方案？视图中的数学表达式，或 $watchCollection?

Answer 1

你应该使用一个函数，例如：

$scope.getTableWidth = function(){
   return (100 / $scope.array.length) + '%';
}

和

<li ng-style="{'min-width': getTableWidth()}">

所以每次 DOM 刷新你的数组长度都会刷新，即使它改变了。

此致，

Answer 2

如果改用函数会怎样：

$scope.percentage = function () {
  return (100 / $scope.array.length) + '%';
}

// or give array as parameter

$scope.percentage = function (array) {
  return (100 / array.length) + '%';
}

然后使用它：

<li ng-style="{'min-width': percentage()}">

Or

<li ng-style="{'min-width': percentage(array)}">

另一种方法是使用过滤器：

// here it's presumed that you have 
//     var app = angular.module(...);
// somewhere above
app.filter('widthPercentage', function () {
    return function (items) {
        return 100 / items.length + '%';
    };
});

并使用它

<li ng-style="{'min-width': (array | widthPercentage)}">

Answer 3

您应该将百分比定义为一个函数。

看这里：

http://jsfiddle.net/waxolunist/5bnhj4vt/6/

HTML:

<div ng-app="app">
    <div ng-controller="AController">
        <ul>
            <li class="red" ng-repeat="item in items" ng-style="{'width': percentage()}">{{item}}</li>
        </ul>

    <button ng-click="addItem()">addItem</button>
    </div>


</div>

JS:

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

app.controller('AController', function($scope) {

    $scope.items = [1,2,3,4,5,6];

    $scope.percentage = function() {
        return 100/$scope.items.length + '%';
    }

    $scope.addItem = function() {
        $scope.items.push($scope.items.length + 1);
    }
});

如何从数学表达式和另一个范围变量更新范围变量？

How to update scope var from Math expression and another scope var?

angularjs

angularjs-scope

angularjs-watch