嵌套的ng-repeat中的Angularjs ng-class-odd答案

【问题标题】：Angular JS ng-class-odd in nested ng-repeats嵌套的ng-repeat中的Angularjs ng-class-odd
【发布时间】：2022-05-05 02:05:00
【问题描述】：

我正在尝试开发一个非常通用的表格输出器 - 没有固定的行数或列数。因此，我有嵌套的 ng-repeat 属性，例如：

<table>
    <tr ng-repeat="row in rowList">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>

效果很好！直到我尝试使用ng-class-even 和ng-class-odd 来相应地更改行的背景颜色。

如果我将ng-class-*** 语句放在td 标记上，我会得到交替的列颜色。

如果我将 ng-class-*** 语句放在 tr 标记上，我不会得到任何类分配 - 它们都保持默认状态。

我想要交替的行颜色。我该怎么做？

【问题讨论】：

标签： javascript angularjs nested angularjs-ng-repeat

【解决方案1】：

ng-class-odd和ng-class-even的值可以是字符串：ng-class-odd="'myClass'"或表达式ng-class-odd="{myClass: boolExpression}"

还有：

Angular 1.2+：ng-class="{even: $even, odd: $odd}"

<table>
    <tr ng-repeat="row in rowList" ng-class="{even: $even, odd: $odd}">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>
<hr />

角度 ng-class="{even: !($index%2), odd: ($index%2)}"

<table>
    <tr ng-repeat="row in rowList" ng-class="{even: !($index%2), odd: ($index%2)}">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>

示例：http://jsfiddle.net/TheSharpieOne/JYn7S/1/

【讨论】：

感谢您提供有关使用ng-class 代替ng-class-even 和ng-class-odd 的信息。但是，在这种情况下，问题不在于 angularjs，而在于 css - 我将类指定为 td.even 和 td.odd，因此它们没有出现在 tr 标签上。