interview

Home / DeveloperSection / Interviews / Explain the concept of "ng-repeat" in AngularJS

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

20-Jun-2024

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?

MindStick Training

Liked By