我可以使用 $odd 或 $even 属性过滤 ng-repeat 吗？答案

【问题标题】：Can I filter ng-repeat with the $odd or $even properties?我可以使用 $odd 或 $even 属性过滤 ng-repeat 吗？
【发布时间】：2013-12-20 01:28:25
【问题描述】：

我正在尝试按偶数索引自动过滤ng-repeat 列表。有可能以某种方式做到这一点吗？这是我正在尝试的方法，但它不起作用：

<div data-ng-repeat="thing in things | filter:$even" >
     <div>{{thing.name}}</div>
</div>

是否有适当的方法来实现这一目标？

【问题讨论】：

In AngularJS, what is the correct way to filter an array based on odd or even $index property? 的可能重复项

标签： javascript angularjs angularjs-directive

【解决方案1】：

这将显示事物列表的 $even 名称。

<div ng-repeat="thing in things" ng-if="$even">
    {{thing.name}}
</div>

【讨论】：

【解决方案2】：

更新：

或者写一个谓词函数： Working exmaple
文档：ngRepeat

HTML：

<div data-ng-repeat="thing in things | filter:filterEvenStartFrom(0)">
    <div>{{thing.name}}}</div>
</div>

JS：

$scope.filterEvenStartFrom = function (index) {
    return function (item) {
        return index++ % 2 == 1;
    };
};

原文：

这个怎么样：

<div data-ng-repeat="thing in things" ng-hide="$even">
     <div>{{thing.name}}}</div>
</div>

【讨论】：

我选择了过滤功能。现在看起来很明显，但谢谢你成功了。
我没有投反对票，但 ng-if 更好，因为它不会渲染项目。 ng-hide 将渲染该项目并将其隐藏。

【解决方案3】：

ng-repeat 的 documentation 告诉我们在这种情况下可以使用的特殊属性。您可以使用：

$even -> 如果迭代器位置 $index 为偶数则为真（否则为假）。
$odd -> 如果迭代器位置 $index 为奇数则为真（否则为假）。

代码示例：

<div data-ng-repeat="thing in things" ng-if="$even">
     <div>{{thing.name}}</div>
</div>

或

<div data-ng-repeat="thing in things" ng-if="$odd">
     <div>{{thing.name}}</div>
</div>

或

<div data-ng-repeat="thing in things" ng-class="{'my-odd-class': $odd}">
     <div>{{thing.name}}</div>
</div>

或

<div data-ng-repeat="thing in things" ng-class="{'my-even-class': $even}">
     <div>{{thing.name}}</div>
</div>

【讨论】：

【解决方案4】：

就像@Humberto，但有条件比较

<div ng-repeat="i in [0,1]" class="column_{{ i }}">
  <div ng-repeat="thing in things" ng-if="$even == ( i == 0 )">
    {{thing.name}}
  </div>
</div>

【讨论】：

你可以像这样设置条件： [ng-if="evenOddExpression ?$index %2!=0 : $index%2==0" ] 在这里你应该将 [evenOddExpression] 值设置为来自控制器的真或假。