In AngularJS, the ng-repeat directive is used to iterate over an array or object and display its elements dynamically in an HTML template. It is similar to a loop in JavaScript but is specifically designed for binding data in AngularJS applications.
Topics Covered:
- What is
ng-repeat? - Basic Syntax
- Looping Through Arrays
- Using
ng-repeatwith Objects ng-repeatwith Index Tracking- Filtering and Sorting with
ng-repeat - Using
track byfor Performance Optimization - Nested
ng-repeat - Handling Empty Arrays
- Best Practices
- Conclusion
1. What is ng-repeat?
The ng-repeat directive is used to create dynamic lists by iterating over an array or object in the scope. It is commonly used for displaying lists, tables, and dropdowns.
Key Features:
Iterates over arrays and objects.
Dynamically updates when the data changes.
Supports index tracking, filtering, and sorting.
Can be nested for multi-level lists.
2. Basic Syntax
<div ng-repeat="item in array">
{{ item }}
</div>
itemrepresents each element in thearray.- The block inside
<div>repeats for each element in thearray.
3. Looping Through Arrays
Let’s see an example of ng-repeat in action.
Example: Displaying a List of Fruits
<!DOCTYPE html>
<html lang="en">
<head>
<title>ng-repeat Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="FruitController">
<ul>
<li ng-repeat="fruit in fruits">{{ fruit }}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("FruitController", function($scope) {
$scope.fruits = ["Apple", "Banana", "Mango", "Orange"];
});
</script>
</body>
</html>
Explanation:
- The
fruitsarray is initialized in the controller. ng-repeat="fruit in fruits"loops through the array and displays each fruit inside an<li>.
Output:
- Apple
- Banana
- Mango
- Orange
4. Using ng-repeat with Objects
You can also iterate over objects in AngularJS.
Example: Displaying a List of Employees
<table border="1">
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr ng-repeat="employee in employees">
<td>{{ employee.name }}</td>
<td>{{ employee.role }}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("EmployeeController", function($scope) {
$scope.employees = [
{ name: "John", role: "Developer" },
{ name: "Sarah", role: "Designer" },
{ name: "Mike", role: "Manager" }
];
});
</script>
Explanation:
- Each row (
<tr>) is generated dynamically. {{ employee.name }}and{{ employee.role }}bind values from the object.
5. ng-repeat with Index Tracking
You can track the index of each iteration using $index.
Example: Displaying Index with Items
<ul>
<li ng-repeat="fruit in fruits">{{ $index + 1 }}. {{ fruit }}</li>
</ul>
Output:
- Apple
- Banana
- Mango
- Orange
6. Filtering and Sorting with ng-repeat
Example: Filtering Items in a List
<input type="text" ng-model="searchText" placeholder="Search for a fruit...">
<ul>
<li ng-repeat="fruit in fruits | filter:searchText">{{ fruit }}</li>
</ul>
Explanation:
- The input field updates
searchText. filter:searchTextdynamically filters the list based on user input.
Sorting Data with orderBy
<select ng-model="sortOrder">
<option value="name">Sort by Name</option>
<option value="-name">Sort by Name (Descending)</option>
</select>
<ul>
<li ng-repeat="fruit in fruits | orderBy:sortOrder">{{ fruit }}</li>
</ul>
Explanation:
- The dropdown selects a sorting order.
orderBy:sortOrdersorts the array based on the selected value.
7. Using track by for Performance Optimization
By default, AngularJS tracks elements by reference. When working with large lists, use track by $index to optimize performance.
Example: Using track by $index
<li ng-repeat="fruit in fruits track by $index">{{ fruit }}</li>
Why use track by $index?
Prevents unnecessary re-rendering.
Improves performance for large lists.
8. Nested ng-repeat
You can use ng-repeat inside another ng-repeat to display nested data.
Example: Displaying Categories and Items
<div ng-repeat="category in categories">
<h3>{{ category.name }}</h3>
<ul>
<li ng-repeat="item in category.items">{{ item }}</li>
</ul>
</div>
$scope.categories = [
{ name: "Fruits", items: ["Apple", "Banana", "Mango"] },
{ name: "Vegetables", items: ["Carrot", "Tomato", "Cabbage"] }
];
Output:
Fruits
- Apple
- Banana
- Mango
Vegetables
- Carrot
- Tomato
- Cabbage
9. Handling Empty Arrays
If the array is empty, display a message.
Example: Showing a Message for Empty Lists
<p ng-if="fruits.length === 0">No fruits available</p>