---
title: "Explain the concept of \"ng-repeat\" in AngularJS"  
description: "Explain the concept of \"ng-repeat\" in AngularJS"  
author: "Ashutosh Patel"  
published: 2024-06-20  
updated: 2024-06-20  
canonical: https://www.mindstick.com/interview/33921/explain-the-concept-of-ng-repeat-in-angularjs  
category: "angular js"  
tags: ["javascript", "angular js", "angularjs ng repeat"]  
reading_time: 3 minutes  

---

# Explain the concept of "ng-repeat" in AngularJS

#### 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.

```html
<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.

```html
<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.

```html
<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.

```html
<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?](https://www.mindstick.com/interview/33920/how-to-use-location-in-angularjs)

## Answers

### Answer by Ashutosh Patel

#### 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.

```html
<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.

```html
<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.

```html
<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.

```html
<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?](https://www.mindstick.com/interview/33920/how-to-use-location-in-angularjs)


---

Original Source: https://www.mindstick.com/interview/33921/explain-the-concept-of-ng-repeat-in-angularjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
