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中。以下是同一问题的fiddle。

请告知。

修改

我有我想要的东西，我将主阵列分成两个不同的数组奇数和偶数数组;这个 fiddle 可能对将来遇到同一问题的人有用。

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}可以使用ngClassOdd和ngClassEven：

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

All-in-one Fiddle

Answer 2

由于ng-repeat的工作方式，我认为你将会遇到一些麻烦。它为重复的每次迭代生成一个新范围。因此，每次循环时你最终会得到两个div，一个是可见的，一个是隐藏的。

解释你一直看到的奇怪行为：

在第一种情况下，循环在显示两个div并显示一个div之间交替显示。在一行中只显示一个div，可以理解的是，在第二列中插入了一个空白。
在第二种情况下，ng-repeat循环在显示第一个div和第二个div之间交替。没有一些CSS样式来显示差异，它看起来像一个div。您可以通过向其中一个div添加text-info等样式来使其弹出。

我希望能够解释幕后发生的事情，但更好的问题是......你想用两个div来完成什么？

更新：由于您的目标是采用该阵列并将其抽出为2列布局，因此您可以取消行div和2列div。相反，尝试重复一个6宽度的列div。它将为每隔一列处理行换行。如果你想区分div，可以使用@Blackhole指出的奇数和偶数样式。我有一个可能有用的小提琴设置here。

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

2 个答案: