0

我有这段工作代码（如下），它的功能和功能应该很好，但是它不是最佳的，可以请帮助我用 $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();

}
4

2 回答 2

3

我会用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

于 2013-11-02T19:18:17.050 回答
2

ng-class将评估一些 javascript ，包括其中length使用的任何变量都是范围属性....例如：

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

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

布尔变量也!可以在 ng-class中使用

DEMO

于 2013-11-02T23:38:14.577 回答