AngularJS ng-repeat Tracking and Duplicates


Example

ngRepeat uses $watchCollection to detect changes in the collection. When a change happens, ngRepeat then 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.

Duplicates

  • track by for any list that may include duplicate values.
  • track by also speeds up list changes significantly.
  • If you don't use track by in this case, you get the error: [ngRepeat:dupes]
$scope.numbers = ['1','1','2','3','4'];

<ul>
  <li ng-repeat="n in numbers track by $index">
    {{n}}
  </li>
</ul>