如何在 ng-repeat 中为变量设置类

Question

我有例如我在范围中描述的变量 5，我围绕这个变量计算了范围，现在我必须显示这个变量并为这个变量设置 css.class。我该怎么做？

这是我在code fiddle 中的示例

Answer 1

创建一个基于值返回您喜欢的 css 类的函数：

$scope.getClass = function(n) {
    /*example implementation*/
    if (n == 5) {
        return "red";
    } else {
        return "normal";
    }
  };

然后在 ng-class 属性中使用这个函数：

<li ng-repeat="n in range(5,15)" ng-class="getClass(n)">test {{n}}</li>

jsfiddle

更新：

根据您的建议，我修改了我的解决方案。你可以像这样解决你的问题： 假设您在范围内设置了一个值：

$scope.myvalue = 5;

然后在 range 函数内你必须添加你的值（它可以在最后）：

$scope.range = function(min, max, step){
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step) input.push(i);
    input.push($scope.myvalue); //insert value that has to be highlighted
    return input;
  };

然后将数组传递给 ng-repeat：

<li ng-repeat="n in range(0, 9, 3) | orderBy:identity" ng-class="{'red' : n == myvalue}">test {{n}}</li>

并将其添加到控制器（以便 orderBy 工作）：

$scope.identity = angular.identity;

或者如果你使用 AngularJS 高于 1.3.0-rc5，你可以简单地使用（没有 entity 声明）（参见related answer）：

<li ng-repeat="n in range(0, 9, 3) | orderBy" ng-class="{'red' : n == myvalue}">test {{n}}</li>

请注意，在这种情况下，您不再需要 getClass() 函数 - 您只需将 n 与 myvalue 进行比较即可。

fiddle with new solution