如何使用ng-repeat与filter和$ index？

Question

我想在Angular中使用ng-repeat,而我只想输出数组的一些元素.一个例子:

ng-repeat="item in items | filter:($index%3 == 0)"

但是,这不起作用.请告诉我怎么做; 只输出元素的精确索引.

Answer 1

在你的代码中,过滤器应用于'items'数组,而不是每个数组项,这就是为什么它不能按预期工作.

相反,您可以使用ng-show(或ng-if):

<ul>
    <li ng-repeat="item in items" ng-show="$index % 3 == 0">{{item}}</li>
</ul>

见:http://jsfiddle.net/H7d26

编辑:如果您不想添加不可见的dom元素,请使用ng-if指令:

<ul>
    <li ng-repeat="item in items" ng-if="$index % 3 == 0">{{item}}</li>
</ul>

Answer 2

创建自定义过滤器,例如:

filter('modulo', function(){
  return function (arr, div, val) {
      return arr.filter(function(item, index){
          return index % div === (val || 0);
      })
  };
});

然后ng-repeat改为:

<ul ng-repeat="item in items | modulo:3">

或按以下方式过滤(index % 3 === 1):

<ul ng-repeat="item in items | modulo:3:1"> 

http://jsfiddle.net/Tc34P/2/

Answer 3

您需要做的是在$ scope.items中找到"item"的索引.见下文

ng-repeat"item in items | filter:(items.indexOf(item)%3 == 0)

因此,一个现实世界的例子(对于遇到这个解决方案的其他人)将是.

<div ng-repeat="item in filtered = (items | filter:customfilter | orderBy:customsort)">
    <div> This is number {{items.indexOf(item)}} in the items list on the scope.</div>
</div>

无论排序或过滤如何,上面的示例都将获得正确的位置