Explain the concept of "ng-repeat" in AngularJS

Question

Ashutosh Patel · Answer

Concept 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-repeat as an attribute in the HTML element where you want the template to repeat.

<element ng-repeat="item in collection">
 <!-- repeat template content -->
</element>

In the example above
element The HTML element (such as <li>, <div>, etc.) in which the repeated text will be displayed.
item A variable that represents each item in the collection during the iteration.
collection An array or object to iterate over.

Iterating Arrays
When iterating over the array, each item in the array is assigned an item.

<div ng-repeat="fruit in fruits">
 {{ fruit }}
</div>

Iterating Objects
When iterating over the object, the item represents the value of each key-value pair in the object.

<div ng-repeat="(key, value) in myObj">
 Key: {{ key }}, Value: {{ value }}
</div>

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.

<div ng-repeat="item in items track by item.id">
 <!-- template content -->
</div>

Here, item.id is used to uniquely track each item.

Also, Read: How to use $location in AngularJS?

interview

Explain the concept of "ng-repeat" in AngularJS

Can you answer this question?

1 Answers

Concept of ng-repeat