Angular 嵌套 ng-repeat class 变量

Question

所以我有一个相当复杂的 angular table，并且我的重复部分都很好，但是当我用 ng-class-even 和 [=14= 设置变量时]，该变量似乎不会持续存在。也许我误解了 ng-repeat 的范围，但我很难过。

我的重复看起来像：

<tr ng-repeat-start="item in data.group" ng-class-even="color='red'" ng-class-odd="color='blue'">
    <td>{{item.name}}</td>            
    <tr ng-repeat-end ng-repeat="inner in item.innerdata" ng-class="color">
        <td>{{inner.innername}}</td>
    </tr>
</tr>

因此，我希望在行循环时设置颜色。这是 Fiddle with the sample setup.

Answer 1

ng-class-even & ng-class-odd 将查看当前的 ng-repeat $index 对象并决定应将哪个值赋予 class 属性。

ng-class-even / ng-class-odd

Takes an expression & the result of the evaluation can be a string representing space delimited class names or an array.

像下面这样更改标记HTML

标记

<table>
    <tr ng-repeat-start="item in data.group" ng-init="$index%2==0?(color='blue'): (color='red')">
        <td>{{item.name}}</td>            
        <tr ng-repeat-end ng-repeat="inner in item.innerdata" ng-class="color">
            <td>{{inner.innername}}</td>
        </tr>
    </tr>
</table>

Fiddle

更新 1

更好的解决方案是直接使用 ng-class 到内部 ng-repeat

<table>
    <tr ng-repeat-start="item in data.group">
        <td>{{item.name}}</td>            
        <tr ng-repeat-end ng-repeat="inner in item.innerdata" ng-class="$parent.$index%2 == 0? 'red': 'blue'">
            <td>{{inner.innername}}</td>
        </tr>
    </tr>
</table>

Updated 1

更新 2

更准确的解决方案是使用 $parent

的 $even 或 $odd 对象

<table>
    <tr ng-repeat-start="item in data.group">
        <td>{{item.name}}</td>            
        <tr ng-repeat-end ng-repeat="inner in item.innerdata" ng-class="$parent.$even? 'red': 'blue'">
            <td>{{inner.innername}}</td>
        </tr>
    </tr>
</table>

Update 2

Angular 嵌套 ng-repeat class 变量

Angular nested ng-repeat class variable

angularjs

ng-class

angularjs-ng-class

angularjs-ng-class-even

angularjs-ng-class-odd