如何在Angular JS中为行分配备用类？

Question

我想为表中的行分配备用类.我正在使用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不要使用class属性进行内部评估吗？

请帮忙.谢谢!

Answer 1

您应该使用angular指令ngClassEven和ngClassOdd.

请查看文档部分以了解如何使用它们

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-even是正确的方法,但为了搜索者的利益,你的初始提议与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-class-odd和指令.ng-class-evenng-repeat

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

这为每行提供了很好的交替类:

此示例取自以下页面,该页面还演示了如何将JSON数据转换为友好,响应迅速的Master-View页面:

使用AngularJS的主视图