嵌套 ng-repeat 中的 Angular JS ng-class-odd [英] Angular JS ng-class-odd in nested ng-repeats

问题描述

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

I'm trying to develop a very generic table outputter - no set number of rows or columns. As such, I've got nested ng-repeat attributes, as such:

<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 相应地更改行的背景颜色.

It's working great! Until I try to use ng-class-even and ng-class-odd to change the background color of the rows accordingly.

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

If I put the ng-class-*** statements on the td tag, I get alternating column colors.

如果我将 ng-class-*** 语句放在 tr 标签上，我不会得到 any 类分配 -他们都保持默认.

If I put the ng-class-*** statements on the tr tag, I don't get any class assignment - they all stay default.

我想要交替的行颜色.我该怎么做?

I want alternating row colors. How do I go about doing this?

请删除这个，有人吗?事实证明，问题在于我的 css 类指定该类设置在 td 标签上.

Please delete this, someone? It turns out the problem was that my css classes were specifying that the class were set on a td tag.

推荐答案

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

The value of ng-class-odd and ng-class-even can be a string: ng-class-odd="'myClass'" or an expression ng-class-odd="{myClass: boolExpression}"

还有:

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

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

角<1.2 ng-class="{偶数: !($index%2), 奇数: ($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-repeat 中的 Angular JS ng-class-odd的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！