Angularjs - 如何在中有条理地应用不同的类来重复指令[英]Angularjs - How to apply different class in conditionally to repeat directive 本文翻译自 Aitiow 查看原文 2012-09-16 14042 indexing/

I need to apply a different class to a <tr> according to the $index of the repeat directive. For example

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

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

I need to apply a different style to <tr> depending on whether the index is even and odd.

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

How could I solve this?

我该怎么解决这个问题？

2 个解决方案

#1

Normally you would use ngClassOdd (http://docs.angularjs.org/api/ng.directive:ngClassOdd) and ngClassEven (http://docs.angularjs.org/api/ng.directive:ngClassEven) directives like this:

通常你会使用这样的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'">

Here is the jsFiddle: http://jsfiddle.net/pkozlowski_opensource/hNHJ4/1/

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

Unfortunately there is an issue where the mentioned directives are not working correctly when rows are removed: https://github.com/angular/angular.js/issues/1076

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

As a work around you can use the ngClass directive (http://docs.angularjs.org/api/ng.directive:ngClass) with the $index variable exposed by a repeater:

作为一种解决方法，您可以使用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)}">

Here is the jsFiddle: http://jsfiddle.net/pkozlowski_opensource/am7xs/

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

It is not super-clean, but could be improved (for example, by exposing a function in a root scope, something like:

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

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

till the mentioned bug is fixed

直到上面提到的bug被修复

#2

If this is just for styling you can just use CSS

如果这只是用于样式，你可以使用CSS

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

see http://jsfiddle.net/5MSDC/ for an example

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

#1