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

Question

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

这是我在 code fiddle

中的示例

Answer 1

创建一个函数 returns 您的首选 css class 基于以下值：

$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;

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

$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;

或者如果你在 1.3.0-rc5 以上使用 AngularJS 你可以简单地使用（没有 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

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

how to set class for variable in ng-repeat

javascript

for-loop

angularjs

ng-repeat