Expand Minimize

Use 'track by' in ngRepeat directives

Use 'track by' in ngRepeat directives

CheckId NG1121001
TypeName UseTrackByInNgRepeat
Severity CriticalWarning
Type Template

By default AngularJS tracks all items of a collection using a $$hashKey property. When you replace the whole collection, for example as a result of an AJAX call, all items are removed from the DOM and recreated. To improve the performance of working with collections of items, you should use track by in ngRepeat directives. Using a track by expression you can instruct AngularJS when to refresh specific items.

Good practice

<ul class="tasks">
    <li ng-repeat="task in tasks track by task.id" ng-class="{done: task.done}">
        {{task.id}}: {{task.title}}
    </li>
</ul>


Bad practice
<ul class="tasks">
    <li ng-repeat="task in tasks" ng-class="{done: task.done}">
        {{task.id}}: {{task.title}}
    </li>
</ul>

Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.