Angularjs - 如何在有条件地应用不同的类重复指令

Question

我需要根据repeat指令的<tr>将不同的类应用于$index。例如

<table>
   <tr ng-repeat="model in list" class="xxx">
       <td>...</td>
   <tr>
</table>

我需要对<tr>应用不同的样式，具体取决于索引是偶数还是奇数。

我怎么解决这个问题？

Answer 1

通常你会使用这样的ngClassOdd（http://docs.angularjs.org/api/ng.directive:ngClassOdd）和ngClassEven（http://docs.angularjs.org/api/ng.directive:ngClassEven）指令：

<tr ng-repeat="item in items" ng-class-odd="'class1'" ng-class-even="'class2'">

这是jsFiddle：http://jsfiddle.net/pkozlowski_opensource/hNHJ4/1/

不幸的是，当删除行时，提到的指令无法正常工作：https://github.com/angular/angular.js/issues/1076

作为一种解决方法，您可以将ngClass指令（http://docs.angularjs.org/api/ng.directive:ngClass）与转发器公开的$ index变量一起使用：

<tr ng-repeat="item in items" ng-class="{class1 : $index%2==0, class2 : !($index%2==0)}">

这是jsFiddle：http://jsfiddle.net/pkozlowski_opensource/am7xs/

它不是超级干净的，但可以改进（例如，通过在根范围中公开函数，例如：

ng-class="getClass($index,'class1','class2')"

直到上述错误得到修复

Answer 2

如果只是为了样式，你可以使用CSS

tr:nth-child(odd) { ... }
tr:nth-child(even) {...}

请参阅http://jsfiddle.net/5MSDC/以获取示例