Question

我正在尝试开发一个非常通用的表输出器 - 没有设置行数或列数。因此，我有嵌套的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标记上，我就不会任何类分配 - 它们都保持默认。

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

编辑：

请删除此人，某人？事实证明问题是我的css类指定类是在td标记上设置的。

Answer 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 />

Angular＆lt; 1.2 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-repeats中的Angular JS ng-class-odd

1 个答案: