如何分配替代类到Angular JS中的行？

我想为表中的行分配替代类。 我正在使用ng-repeat

<tr ng-repeat="event in events"> 

我想得到这样的输出：

 <tr class="odd">...</tr> <tr class="event">....</tr> 

我试过这个（不起作用）：

 <tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'"> 

我无法得到它的工作。 此外，它似乎像Angular使用'class'属性。 为什么这样做？ 我可以告诉AngularJS不要使用类属性进行内部评估吗？

请帮忙。 谢谢！

Answer 1

你应该使用ngClassEven和ngClassOdd的angular度指令。

看看如何使用它们的文档部分

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd

希望这可以帮助。

Answer 2

从Angular文档

使用ng-class-odd ng-class-even

 <li ng-repeat="name in names"> <span ng-class-odd="'odd'" ng-class-even="'even'"> {{name}} </span> </li> 

Answer 3

正如@ganaraj所说，ng-class-odd和ng-class甚至是正确的方式，但是为了search者的利益，你最初的提议在Angular> = 1.2.19中不远了。

这里是一个密切相关的例子，如果着色比交替的行（例如，每3行）更有效，也可以工作：

 <div> <style> .color0 { background-color: lightblue; } .color1 { background-color: lightyellow; } .color2 { background-color: lightgray; } </style> <div ng-repeat="result in results" ng-class="'color' + ($index % 3)"> <div> <p>{{result.myText}}</p> </div> </div> 

Answer 4

您也可以直接在ng-repeat指令中使用ng-class-odd和ng-class-even指令。

 <div class="cssOneProductRecord" ng-repeat='..' ng-class-odd="'cssProductOdd'" ng-class-even="'cssProductEven'" > 

这给了我们每行很好的交替类：

这个例子来自以下页面，它也演示了如何将JSON数据转换成一个友好的响应式主视图页面：

使用AngularJS的主视图