javascript - 如何将备用类分配给 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 似乎正在使用“类”属性。为什么要这样做？我可以告诉 AngularJS 不要使用 class 属性进行内部评估吗？

请帮忙。谢谢！

Answer 1

您应该为此使用角度指令 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-oddand指令。ng-class-evenng-repeat

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

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

此示例取自以下页面，该页面还演示了如何将 JSON 数据转换为友好、响应式的 Master-View 页面：

使用 AngularJS 的主视图

Answer 5

改进 Fintan Kearney 的答案，

来自：https ://docs.angularjs.org/api/ng/directive/ngClassOdd

样式.css

.odd {
  color: red;
}
.even {
  color: blue;
}

索引.html

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
  <li ng-repeat="name in names">
   <span ng-class-odd="'odd'" ng-class-even="'even'">
     {{name}}
   </span>
  </li>
</ol>