forum

Home / DeveloperSection / Forums / How to use loops in AngularJS?

Ask Question
Anubhav Kumar

Anubhav Kumar

Follow
The Anubhav portal was launched in March 2015 at the behest of the Hon'ble Prime Minister for retiring government officials to leave a record of their experiences while in Govt service .

Can you answer this question?

Answer

1 Answers

Manish Sharma

Manish Sharma

14-May-2024

In AngularJS, loops are typically handled using the ng-repeat directive, which is designed for iterating over collections such as arrays or objects. Here are examples demonstrating how to use ng-repeat for looping through an array and an object.

 

Looping Through an Array

Here’s how to loop through an array using ng-repeat:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myController">
    <p>Read all array data</p>
    <ul>
        <li ng-repeat="item in items">
            <span class="fw-bold">{{ item }}</span>
        </li>
    </ul>
    <p>Read array data with filter</p>
    <ul>
        <li ng-repeat="item in items | filter : 'ja'">
            <span class="fw-bold">{{ item }}</span>
        </li>
    </ul>
</div>
<script>
    angular.module('myApp', [])
    .controller('myController', function($scope) {
        $scope.items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'java'];
    });
</script>
</body>
</html>

In this example:

  • An AngularJS application is defined with a module named myApp.
  • A controller named myController is defined, where an array of items is assigned to the $scope.
  • The ng-repeat directive is used to iterate over the items array and display each item in a list.

 

Looping Through an Object

Here’s how to loop through an object using ng-repeat:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div class="container" ng-controller="myController">
        <p>Read all array data</p>
        <ul>
            <li ng-repeat="item in items">
                <span class="fw-bold">{{ item }}</span>
            </li>
        </ul>
        <p>Read array data with filter</p>
        <ul>
            <li ng-repeat="item in items | filter : 'ja'">
                <span class="fw-bold">{{ item }}</span>
            </li>
        </ul>
        <p>Read objects data </p>
        <ul>
            <li ng-repeat="(key, value) in person">
                {{ key }}: {{ value }}
            </li>
        </ul>
    </div>
    <script>
        angular.module('myApp', [])
            .controller('myController', function ($scope) {
                $scope.items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'java'];
                $scope.person = {
                    name: 'John Doe',
                    age: 30,
                    occupation: 'Engineer'
                };
            });
    </script>
</body>
</html>

In this example:

  • The person object is defined in the myController controller.
  • The ng-repeat directive is used to iterate over the person object.
  • The keys and values of the object are displayed in a list.

 

Additional Features of ng-repeat

Using Index

You can also access the index of the current item in the array:

<li ng-repeat="(index, item) in items">
	{{ index + 1 }}. {{ item }}
</li>

 

Filtering and Sorting

You can apply filters and sorting within the ng-repeat directive:

<li ng-repeat="item in items | filter:searchText | orderBy:'name'">
	{{ item.name }}
</li>

In this example, the items will be filtered based on searchText and sorted by the name property.

 

Conclusion

Using ng-repeat in AngularJS lets you easily loop through arrays and objects, display their contents, and apply filters and sorting as needed. This directive is essential for dynamically rendering lists based on your AngularJS application's data.

 

Thank you.

MindStick Training

Liked By