Question

我有这段工作代码（下面），它的功能和功能应该很好但是它不是最佳的，可以帮我用$ watch方法重写它吗？我有几次尝试，但它没有工作。我的线程参考这个： angularjs angular doesn't read the length of an array

http://jsfiddle.net/Tb9j5/8/

function dialogWindows($scope) {
    $scope.alpeic = [];
    $scope.compute=function()
    {
        $scope.alpeic.push(1);
        $scope.records = [
        {id:0,
         link:$scope.alpeic.length > 5 ? "alpeic.html" : "",
         className:$scope.alpeic.length > 5 ? "special" : "normal",
         item:"This is item A"},
        {id:1,
        link:$scope.alpeic.length > 5 ? "alpeic.html" : "",
        className:$scope.alpeic.length > 5 ? "special" : "normal",
         item:"This is item B"}];
    }

    $scope.compute();

}

Answer 1

我会将ng-style与ng-class混合使用。

参考：

ng-class - 在CSS样式集静态/提前知道时使用
ng-style - 在无法定义CSS类时使用，因为样式值可能会动态更改。

例如：

 <div ng-repeat="record in records"> 
        <a href="{{record.link}}">
            <div
                ng-style="myStyle()"
                ng-class="{true: 'special', false: 'normal'}[alpeic.length > 5]"
             >{{record.item}}
            </div>
        </a> 
    </div>

并在控制器中：

  $scope.myStyle = function () {
    var style = {};

    if ($scope.alpeic.length > 5) {
        style = {"font-size": 30 + 'px'};
    } else {
        style = {"font-size": ($scope.alpeic.length + 12) + 'px'};
    }
    return style;
};

演示 Fiddle

Answer 2

ng-class将评估一些javascript，包括length以及范围属性中使用的所有变量....例如：

<div ng-class="{'normal':alpeic.length <=5, 'special':alpeic.length >5 }"  >

创建一个对象，其中key是类名，value是基于范围的js表达式或者是布尔值的简单范围变量。

布尔变量也可以在ng-class

中使用!

的 DEMO

angularJS使用$ watch方法观察数组长度

2 个答案: