Angular ng-repeat Error “Duplicates in a repeater are not allowed.”

Question

I am defining a custom filter like so:

<div class="idea item" ng-repeat="item in items" isoatom> 

<div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2"> 

.... 

</div>

</div>

As you can see the ng-repeat where the filter is being used is nested within another ng-repeat

The filter is defined like this:

myapp.filter('range', function() { 

   return function(input, min, max) { 

   min = parseInt(min); //Make string input int 

   max = parseInt(max); 

   for (var i=min; i<max; i++) 

    input.push(i); 

   return input; 

   }; 

});

I'm getting:

Error: Duplicates in a repeater are not allowed. Repeater: comment in item.comments | range:1:2 ngRepeatAction@https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

Answer 1

The error you are getting because AngularJS does not allow duplicates in an ng-repeat directive. This means if you are trying to do the following, you will get an error.

<div ng-repeat="row in [1,1,1]">

However, you can get rid of that error by changing the above code slightly to define an index to determine uniqueness as below will get it working again.

<div ng-repeat="row in [1,1,1] track by $index">