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

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属性.请参阅文档.

喜欢 :

<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类的选项,这里我使用的是三元版本,但还有其他方法可以使用它.

这是一个有效的例子

另外,这里有一篇很好的文章解释了更多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