In this article I will explain with an example, how to use While and ForEach loops in AngularJS.
 
 

Using While Loop

HTML Markup

The following HTML Markup consists of:
DIV – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
P – For displaying fruits, which will be populated from Array using ng-repeat directive.
Note: For more details on ng-repeat directive, please refer my article AngularJS: ng-repeat Table example.
 
<h3>While Loop Example</h3>
<div ng-app="MyApp" ng-controller="MyController">
    <p ng-repeat="fruit in Fruits">{{ fruit }}</p>
</div>
 

WhileLoop using AngularJS

Inside the HTML Markup, the following script file is inherited:
1. angular.min.js
Inside the controller, an Array is defined and a WHILE loop is executed over the Array.
Finally, one by one an Array element is added into the Array named Fruits using push method.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope) {
        var fruits = ["Mango", "Apple","Banana", "Papaya", "Grapes"];
        var index = 0;
        $scope.Fruits = [];
        while (index < fruits.length) {
            $scope.Fruits.push(fruits[index]);
            index++;
        }
    });
</script>
 

Screenshot

Using While and ForEach Loops in AngularJS
 
 

Using ForEach Loop

HTML Markup

The following HTML Markup consists of:
DIV – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.
Note: For more details on ng-repeat directive, please refer my article AngularJS: ng-repeat Table example.
 
Finally, for each JSON object in the Customers JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.
<h3>ForEach Loop Example</h3>
<div ng-app="MyApp" ng-controller="MyController">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>Customer Id</th>
            <th>Name</th>
            <th>Country</th>
        </tr>
        <tbody ng-repeat="customer in Customers">
            <tr>
                <td>{{customer.CustomerId}}</td>
                <td>{{customer.Name}}</td>
                <td>{{customer.Country}}</td>
            </tr>
        </tbody>
    </table>
</div>
 

ForEach Loop using AngularJS

Inside the HTML Markup, the following script file is inherited:
1. angular.min.js
Inside the controller, an Array of customer object is defined and a FOR EACH loop is executed.
Finally, one by one the record is added into the Array named Customers using push method.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope) {
        var customers = [
            { CustomerId: 1, Name: 'John Hammond', Country: 'United States' },
            { CustomerId: 2, Name: 'Mudassar Khan', Country: 'India' },
            { CustomerId: 3, Name: 'Suzanne Mathews', Country: 'France' },
            { CustomerId: 4, Name: 'Robert Schidner', Country: 'Russia' }
        ];
 
        $scope.Customers = [];
        angular.forEach(customers, function (customer) {
            $scope.Customers.push(customer);
        });
    });
</script>
 

Screenshot

Using While and ForEach Loops in AngularJS
 
 

Downloads

Download Code