Looping in AngularJS not working

Question

I'm trying a simple AngularJS looping using 'ng-repeat' directive as below :

<div ng-app="" ng-init="numbers=[1,3,5,2]">
   <ul>
       <li ng-repeat="item in numbers">{{ item }}</li>
   </ul>
</div>

The result of this is as below, which is perfect

• 1
• 3
• 5
• 2

However, when I change the 'numbers' array like this

<div ng-app="" ng-init="numbers=[1,3,5,2,2]">

being the rest as is, it does not work.

The only change I have made is that I've added one more item in the 'numbers' array '2'. The issue I figured out is whenever an item is repeated in the array ( '2' in this case ), the problem occurs.

The console log I noticed is like below

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.14/ngRepeat/dupes?p0=item%20in%20numbers&p1=number%3A2&p2=2
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:232:494
    at Object.fn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:53)
    at l.$get.l.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:123:138)
    at l.$get.l.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:58)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:17:479
    at Object.e [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:36:315)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:17:400)
    at tc (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:18:179)

Also, if the array is of string type values, the same problem persists too.

For example, <div ng-app="" ng-init="names=['Bishnu', 'Sagar', 'John', 'Bishnu']"> in this case also I'm facing the same issue.

This behavior of AngularJS is very strange.

Does anyone know the reason, and how to resolve?

Answer 1

Try this...

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

ngRepeat makes the corresponding changes to the DOM

When an item is added, a new instance of the template is added to the DOM. When an item is removed, its template instance is removed from the DOM. When items are reordered, their respective templates are reordered in the DOM. By default, ngRepeat does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
  {{n}}
</div>

Refer:https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

As per the Angular Docs Duplicates are not allowed. You need to use 'track by' expression to specify unique keys.

Created this Plnkr for your reference

<div ng-app="" ng-init="numbers=[1,3,5,2,2]">
   <ul>
       <li ng-repeat="item in numbers track by $index">{{ item }}</li>
   </ul>
</div>