如何在filter和$index中使用ng-repeat ?

I want to use ng-repeat in Angular, while I only want to output some elements of the array. An Example:

我想在角度上使用ng-repeat，而我只想输出数组的一些元素。一个例子:

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

However, this does not work. Please tell me how to do this; only output exact index of elements.

然而，这是行不通的。请告诉我怎么做;只输出元素的精确索引。

6 个解决方案

#1

In your code, filter apply on 'items' array, not on each array item, that's why it does not work as you expect.

在代码中，过滤器应用于“项”数组，而不是每个数组项，这就是为什么它不能像您期望的那样工作。

Instead, you can use ng-show (or ng-if):

相反，你可以使用ng-show(或者ng-if):

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

See: http://jsfiddle.net/H7d26

参见:http://jsfiddle.net/H7d26

EDIT: Use ng-if directive if you do not want to add invisible dom elements:

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

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

#2

Create a custom filter, for example:

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

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

Then change the ng-repeat to:

然后将ng-repeat更改为:

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

Or filter by (index % 3 === 1) like:

或通过(index % 3 === 1)如:

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

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

#3

What you need to do is find the index of "item" in $scope.items. See below

您需要做的是在$scope.items中查找“项目”的索引。见下文

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

So a real world example (for others who come across this solution) would be.

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

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

The above example will get the correct position regardless of the sorting or filtering

上面的示例将获得正确的位置，而不考虑排序或过滤

#4

All the precedent answers will work, but if you want to use a filter, you can also define it yourself, like in this fiddle : http://jsfiddle.net/DotDotDot/58y7u/

所有以前的答案都可以，但是如果您想使用过滤器，您也可以自己定义它，比如http://jsfiddle.net/dotdotdotdot/58y7u/

.filter('myFilter', function(){
    return function(data, parameter){
        var filtered=[];
        for(var i=0;i<data.length;i++){
                if(i%parameter==0)
                    filtered.push(data[i]);
        }
        return filtered;
    }
});

and then call it like this :

然后这样称呼它:

ng-repeat='item in items | myFilter:3'

(I added extra complexity with a parameter, if you want to change it quickly to even numbers for example)

(我在参数中增加了额外的复杂性，如果你想快速地将其变为偶数)

Have fun

玩得开心

+ +

#5

I suggest filtering with a function:

我建议用一个函数进行过滤:

ng-repeat"item in filterItems(items)"

And on the Controller:

和控制器:

$scope.filterItems= function(items) {
    var result = {};
    angular.forEach(items, function(item) {
       // if item is something.. add to result
    });
    return result;
}

#6

An alternate approach to solving this creates a new "list" (I don't know the proper term in this context) in the ng-repeat. This new list can then be referred to within the scope

解决这个问题的另一种方法是在ng-repeat中创建一个新的“列表”(我不知道这个上下文中的合适术语)。然后可以在范围内引用这个新列表

<ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="friend in filteredFriends = ((friends | filter:q:strict) | orderBy:'age')" ng-if="$index % 2 == 0">
    [{{$index + 1}}] {{filteredFriends[$index].name}} who is {{filteredFriends[$index].age}} years old.
    <span ng-if="$index+1 < filteredFriends.length">[{{$index + 2}}] {{filteredFriends[$index+1].name}} who is {{filteredFriends[$index+1].age}} years old.</span>
  </li>
</ul>

The ng-if on the span wrapping the second half prevents the base text from being shown when the previous element is the last element of the list.

如果在前一个元素是该列表的最后一个元素的时候，如果在span包装上的第二个半部分会阻止基本文本的显示。

#1