Javascript 如何将备用类分配给 Angular JS 中的行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12179455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to assign alternate class to rows in Angular JS?
提问by Sameer Gupta
I want to assign alternate class to rows in a table. I am using ng-repeat on
我想为表中的行分配替代类。我正在使用 ng-repeat
<tr ng-repeat="event in events">
I want to get output like this:
我想得到这样的输出：
<tr class="odd">...</tr>
<tr class="event">....</tr>
I've tried this (doesn't work):
我试过这个（不起作用）：
<tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'">
I can't get it to work. Also it seems like Angular is using 'class' attribute to. Why is it doing so? Can I tell AngularJS not to use the class attribute for internal evaluations?
我无法让它工作。此外，似乎 Angular 正在使用 'class' 属性。为什么要这样做？我可以告诉 AngularJS 不要使用 class 属性进行内部评估吗？
Please help. Thanks!
请帮忙。谢谢！
回答by ganaraj
You should be using the angular directives ngClassEven and ngClassOdd for this.
为此，您应该使用角度指令 ngClassEven 和 ngClassOdd。
Have a look at the documentation section for how to use them
查看文档部分了解如何使用它们
http://docs.angularjs.org/api/ng.directive:ngClassEven
http://docs.angularjs.org/api/ng.directive:ngClassEven
http://docs.angularjs.org/api/ng.directive:ngClassOdd
http://docs.angularjs.org/api/ng.directive:ngClassOdd
Hope this helps.
希望这可以帮助。
回答by Fintan Kearney
From the Angular docs..
从 Angular 文档..
Use ng-class-odd ng-class-even
使用ng-class-odd ng-class-even
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
回答by HockeyJ
As @ganaraj states ng-class-odd and ng-class-even are the right way to do this, but for the benefit of searchers, your initial proposal wasn't far off working in Angular >=1.2.19.
正如@ganaraj 所说的 ng-class-odd 和 ng-class-even 是正确的方法，但为了搜索者的利益，你最初的建议在 Angular >=1.2.19 中工作不远了。
Here is a closely related example of something that would have worked and would also work if coloring more than alternate rows (e.g. every 3 rows):
这是一个密切相关的示例，该示例可以工作并且如果着色多于交替行（例如每 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>
回答by Mike Gledhill
You can also use the ng-class-oddand ng-class-evendirectives directly within the ng-repeatdirective.
您还可以直接在指令中使用ng-class-odd和指令。ng-class-evenng-repeat
<div class="cssOneProductRecord"
ng-repeat='..'
ng-class-odd="'cssProductOdd'"
ng-class-even="'cssProductEven'" >
Which gives us nice alternating classes for each row:
这为每一行提供了很好的交替类：
This example is taken from the following page, which also demonstrates how to turn JSON data into a friendly, responsive Master-View page:
此示例取自以下页面，该页面还演示了如何将 JSON 数据转换为友好、响应式的 Master-View 页面：
回答by danilo
Improving Fintan Kearney's answer,
改进 Fintan Kearney 的回答，
From: https://docs.angularjs.org/api/ng/directive/ngClassOdd
来自：https: //docs.angularjs.org/api/ng/directive/ngClassOdd
Style.css
样式文件
.odd {
color: red;
}
.even {
color: blue;
}
index.html
索引.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>
