[Solved-2 Solutions] Angular ng-repeat Error “Duplicates in a repeater are not allowed.”
Error Description:
- If we define 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>click below button to copy the code. By - angularjs tutorial - team
- 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;
};
});
click below button to copy the code. By - angularjs tutorial - team
- Error: Duplicates in a repeater are not allowed. Repeater: comment in item.comments | range:1:2
Solution 1:
- AngularJS does not allow duplicates in a ng-repeat directive. This means if we are trying to do the following, we will get an error.
// This code throws the error "Duplicates in a repeater are not allowed.
// Repeater: row in [1,1,1] key: number:1"
<div ng-repeat="row in [1,1,1]">
click below button to copy the code. By - angularjs tutorial - team
- However, changing the above code slightly to define an index to determine uniqueness as below will get it working again.
// This will work
<div ng-repeat="row in [1,1,1] track by $index">
click below button to copy the code. By - angularjs tutorial - team
Solution 2:
- If this error happens with SharePoint 2010: We need to rename the .json file extensions and be sure to update the restService path. No additional "track by $index" was required.