Question

我是棱角分明的新手并尝试执行以下操作：

<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$index %2 == 0">
    <td class="even">
        <a href="#">
            {{element}}
        </a>
    </td>
</div>
<div ng-if="$index %2 != 0">
    <td class="odd">
        <a href="#">
            {{element}}
        </a>
    </td>
</div>
</tr>

对于上面的代码，ng-if都在传递。我犯错的地方？

Answer 1

尝试$even和$odd属性。请参阅documentation。

喜欢：

<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$even">
    <td class="even">
        <a href="#">
            {{element}}
        </a>
    </td>
</div>
<div ng-if="$odd">
    <td class="odd">
        <a href="#">
            {{element}}
        </a>
    </td>
</div>
</tr>

Answer 2

您不需要使用ng-if检查它是偶数还是奇数元素，该功能已经内置：

    <tr ng-repeat="element in awesomeThings">
        <span ng-class="$even ? 'odd' : 'even'">{{element}}</span>
   </tr>

另一个内置功能是ng-class，它为您提供了几个有条件地设置css类的选项，这里我使用的是三元版本，但还有其他方法可以使用它。

这是working example

此外，还有一个good article解释了有关ng-class

的更多信息

Answer 3

您还可以使用 ng-class-even 和 ng-class-odd 。

https://docs.angularjs.org/api/ng/directive/ngClassEven https://docs.angularjs.org/api/ng/directive/ngClassOdd

Answer 4

在css中试试这个：

tr:nth-child(even) {
    background: #CCC
}

tr:nth-child(odd) {
    background: #FFF
}

您可以为第一个项目定义样式：

tr:first-child {
    background: #84ace6
}

AngularJS ng重复：如何区分偶数/奇数元素？

4 个答案: