Angularjs - 如何在<tr>中有条理地应用不同的类来重复指令

Question

我需要<tr>根据$indexrepeat指令将不同的类应用于a .例如

<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/以获取示例