Angularjs Loops
Loops are often handled with instructions such as ng-repeat. This guide allows you to iterate object collections in your AngularJS application and dynamically create HTML objects based on each element in the collection.
Let’s explore the use of loops in AngularJS,
Using the ng-repeat Directive
The ng-repeat instruction is used to iterate over a collection (such as an array or object) and create HTML elements for each object in the collection.
<div ng-app="myApp" ng-controller="MyController">
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
</div>
In this example
ng-app="myApp"Starts an AngularJS application.ng-controller="MyController"associates the controller with aMyControllerdiv, which scopes the objects.ng-repeat="object in objects"Repeats the object array in scope and provides a <li> element for each object in the array.{{ item }}Displays the current item in the list.
Controller (MyController)
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry'];
});
Iterating over Objects
You can also use ng-repeat to iterate over the attributes of the object,
<div ng-app="myApp" ng-controller="MyController">
<ul>
<li ng-repeat="(key, value) in myObject">{{ key }}: {{ value }}</li>
</ul>
</div>
In this case, the key represents the property name, and the value represents the corresponding value in myObject.
Filters using ng-repeat
AngularJS provides filters to enable ng-repeat. For example, you can use
orderBy to filter items or select items based on specific criteria.
<ul>
<li ng-repeat="item in items | orderBy:'name'">{{ item.name }}</li>
</ul>
Track by Expression
When iterating over objects that may be modified or reordered, it is good practice to use
track by to improve performance and maintain relationships between DOM elements and their associated data objects.
<ul>
<li ng-repeat="item in items track by item.id">{{ item.name }}</li>
</ul>
Performance Considerations
- Avoid using
ng-repeaton large collections or heavy packages, as it can affect performance. Use infinite pages or scrolling to efficiently handle large amounts of data. - Use a
track bywith a unique identifier (item.id) to improve performance by helping AngularJS identify unique items.
Example-
<!DOCTYPE html>
<html data-ng-app="myApp" lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS Loop Example</title>
<!-- bootstrap cdn link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- angular js cdn link -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="MyController">
<div class="text-start">
<h2>AngularJS Loops Example</h2>
<p class="fs-5 fw-semibold m-1">Fruits List</p>
<ul>
<!-- bind the data using ng-repeat loop -->
<li data-ng-repeat="fruit in fruits">
{{ fruit.name }} - {{ fruit.color }}
</li>
</ul>
</div>
</div>
<script>
angular.module('myApp', [])
.controller('MyController', function($scope) {
// data collection
$scope.fruits = [
{ name: 'Apple', color: 'Red' },
{ name: 'Banana', color: 'Yellow' },
{ name: 'Cherry', color: 'Red' },
{ name: 'Grapes', color: 'Green' }
];
});
</script>
</body>
</html>
Output-
Loops are best handled with the ng-repeat directive, which allows dynamic HTML objects to be created based on collections or objects in application scope Like using
ng-repeat with filters and track by expressions so Ensure efficient and flexible data binding in your AngularJS applications does so .
Also, Read: Explain Routing in AngularJS
Leave Comment