AngularJS ngRepeat：如何区分偶数/奇数元素？

Question

我是Angular新手，正在尝试做以下操作：

<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都被传递了。 我哪里出错了？

- batman

---

索引是 $index，使用 Angular。 - Pascalz

没有运气。结果还是一样的。 - batman

https://docs.angularjs.org/api/ng/directive/ngClassOdd - JB Nizet

@JBNizet：只有你的解决方案起作用了！ - batman

@batman，awesomeThings是什么？ - kelsier

Answer 1

尝试使用$even和$odd属性。请参考文档。

例如：

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

- kelsier

---

请确保您正在使用 Angular.js 1.2.0 或更新版本。 - gligoran

Answer 2

你不需要使用 ng-if 来检查它是偶数还是奇数元素，因为这个功能已经内置了：

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

另一个内置功能是 ng-class，它提供了多个选项来有条件地设置CSS类。在这里我使用了三元版本，但也有其他使用方法。

这是一个可工作的示例。

此外，这篇好文章更详细地解释了ng-class。

- aarosil

---

这对我来说可行，但我确实不明白这个语句的含义。我假设"$even"是该语句，但为什么第一行被触发为“odd”，而语句是“$even”？（很难解释这个问题） - Jordec

@JorisDecraecker，因为语句应该是："$even ? 'even' : 'odd'"（意思是如果是偶数，则放置偶数类，否则放置奇数类）。当然，你可以在奇数时使用偶数类，但我同意答案可能会有些令人困惑。 - javi_swift

Answer 3

你还可以使用ng-class-even和ng-class-odd。 https://docs.angularjs.org/api/ng/directive/ngClassEven https://docs.angularjs.org/api/ng/directive/ngClassOdd

- Lakatos Gyula

---

这是一个比选中的答案更优雅的使用方式，应该被赞扬 :) - jaderanderson

Answer 4

在 CSS 中尝试这个：

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

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

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

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

- Oleksandr Bondarchuk