Explain the concept of "ng-repeat" in AngularJS
350
20-Jun-2024
Updated on 20-Jun-2024
Ashutosh Kumar Verma
20-Jun-2024Concept of ng-repeat
In AngularJS (version 1.x), there is an instruction called
"ng-repeat"that is used to iterate over a collection of objects (such as an array or an object) and copy the patterns to an object each of the collections The object corresponds to an HTML tag.Syntax
You use
ng-repeatas an attribute in the HTML element where you want the template to repeat.In the example above
elementThe HTML element (such as <li>, <div>, etc.) in which the repeated text will be displayed.itemA variable that represents each item in the collection during the iteration.collectionAn array or object to iterate over.Iterating Arrays
When iterating over the array, each item in the array is assigned an item.
Iterating Objects
When iterating over the object, the
itemrepresents the value of each key-value pair in the object.Track by
To improve performance and help AngularJS maintain the correct state of DOM objects when objects are added, removed, or reorganized, it is recommended to use screens syntactically This helps AngularJS recognize things that have been changed.
Here,
item.idis used to uniquely track each item.Also, Read: How to use $location in AngularJS?