在AngularJS中,基于奇数或偶数$ index属性过滤数组的正确方法是什么？

Question

我想基于偶数和奇数$index属性过滤数组,我想在单独的div中添加奇数元素,甚至在另一个div中添加偶数元素,我可以在JavaScript或jQuery中轻松完成,但我想知道正确的实现方法在AngularJS中也是如此.

这是我到目前为止所做的:

<div ng-app> 
    <div ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
        <div class="row" ng-repeat="name in names">
            <div class="col-xs-6" ng-show="(($index + 1)%2) == 0">{{name}}</div>
            <div class="col-xs-6" >{{name}}</div>
        </div>    
    </div>
</div>

它在第一种情况下显示空元素代替奇数元素,当我为第二个div添加奇数表达式时,第二个div中的元素消失并出现在第一个div中.这是同一个问题的小提琴.

请指教.

编辑:

我得到了我想要的东西,我将主阵列分成两个不同的数组奇数和偶数数组; 这个小提琴可能对将来遇到同样问题的人有用.

Answer 1

从Angular 1.2.0-rc1开始,ngRepeat公开了本地范围的$odd和$even属性.您可以根据以下属性之一使用ngSwitch:

<div ng-repeat="item in itemsList" ng-switch="$even">
    <div ng-switch-when="true">{{item}} is even</div>
    <div ng-switch-default>{{item}} is odd</div>
</div>

请注意,如果您只想根据奇偶校验更改类,则从 1.0.0 开始可以使用ngClassOdd和ngClassEven:

<div ng-repeat="item in itemsList" ng-class-even="'even'" ng-class-odd="'odd'">
    {{item}}
</div>

All-in-one Fiddle