Duplicate element in array not allowed? Error: ngRepeat:dupes

Question

I came across this code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<script>
var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    // If I push a duplicate here, it will crash
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>

<p>Click the little x to remove an item from the shopping list.</p>

</body>
</html>

which runs OK. However, if I push a duplicate element in the array, like this:

$scope.products.push("Milk");

the application will crash. Why is that?

Same behavior if I statically initialize an array with a duplicate.
Sets are with curly brackets, so I don't get this.

do this ng-repeat="x in products track by $index", angular ng-repeat does not allow duplicate — Charlie Ng
– Charlie Ng, Commented Jun 28, 2017 at 15:09

gsamaras · Accepted Answer · 2017-06-28 15:27:08Z

3

If there are some duplicates in your array, you need to track them. Use track by $index in your ng-repeat like this:

<li ng-repeat="x in products track by $index">

This should solve your problem. For more information you can look through docs for ng-repeat (Tracking and Duplicates).

edited Jun 28, 2017 at 15:27

gsamaras

73.7k50 gold badges210 silver badges330 bronze badges

answered Jun 28, 2017 at 15:09

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gsamaras Over a year ago

So the problem is not the array but the ng-repeat? I would like an explanation though, why this happens' why my ng-repeat crashes and yours does not?

P.S. Over a year ago

@gsamaras, yes, if there are some duplicates in your array, you need to track them. For more information you can look through docs for ng-repeat ("Tracking and Duplicates"): docs.angularjs.org/api/ng/directive/ngRepeat

Collectives™ on Stack Overflow

Duplicate element in array not allowed? Error: ngRepeat:dupes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related