1

我想根据偶数和奇数$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 中。这是同一问题的小提琴。

请指教。

编辑：

我得到了我想要的，我将主数组分成两个不同的数组奇数和偶数数组；这个小提琴可能对将来偶然发现相同问题的人有用。

4

2 回答 2

5

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

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

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

All-in-one Fiddle

于 2013-10-21T18:58:57.863 回答
1

我认为由于工作方式的原因，您要做的事情会遇到一些麻烦ng-repeat。它为重复的每次迭代生成一个新范围。因此，每次循环都会得到两个 div，一个可见，一个隐藏。

要解释您所看到的奇怪行为：

  • 在您的第一种情况下，循环在显示两个 div 和显示一个 div 之间交替。在仅显示一个 div 的行中，可以理解的是，它看起来像在第二列中插入了一个空白。

  • 在第二种情况下，ng-repeat 循环在显示第一个 div 和第二个 div 之间交替显示。如果没有一些 CSS 样式来显示差异，它看起来就像一个 div。text-info您可以通过向其中一个 div添加样式来使其流行。

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

更新：由于看起来您的目标是将该数组提取到 2 列布局中，因此您可能可以取消行 div 和 2 列 div。相反，请尝试重复一个 6 宽的列 div。它将每隔一列为您处理行换行。如果您想区分 div，您可以使用 @Blackhole 指出的奇数和偶数样式。我在这里设置了一个可能有用的示例小提琴。

于 2013-10-21T19:01:45.177 回答