Angularjs - 如何有条件地在 <tr> 中应用不同的类来重复指令答案

【问题标题】：Angularjs - How to apply different class in <tr> conditionally to repeat directiveAngularjs - 如何有条件地在 <tr> 中应用不同的类来重复指令
【发布时间】：2012-09-16 13:46:05
【问题描述】：

我需要根据重复指令的$index 将不同的类应用于<tr>。例如

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

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

我该如何解决这个问题？

【问题讨论】：

标签： indexing angularjs repeat

【解决方案1】：

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

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

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

作为一种变通方法，您可以将 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)}">

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

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

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

直到提到的错误被修复

【讨论】：

我想知道是否可以附加一个超出其他 TR 纹理的 TR .. 最好是带有标题标题的 TR。就像每一行都是一周，然后一个 TR 是那个月或那个年的标题，但不包含 7 个 TD。我知道这不可能用 Angular 来做。。
在解释如何解决之前，我会先加上“bug 已修复”这一行，强调一下。

【解决方案2】：

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

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

请参阅http://jsfiddle.net/5MSDC/ 了解示例

【讨论】：

其实这是正确的做法。既然是 CSS 类的东西，CSS 是最好的方法。
谁，你打错了：tr:nth-child(event) {...} .. 它甚至应该不是事件。