Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

How to use loops in AngularJS?

Anubhav Sharma 783 14 May 2024

How to use loops in AngularJS?

Anubhav Sharma

Student

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 .

1 Answers

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

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.