How to use ng-repeat with filter and $index?

Question

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

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.

Answer 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):

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

See: http://jsfiddle.net/H7d26

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

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

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

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

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

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

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