The for Loop in Angular

We will introduce the for loop and display data using the for loop in AngularJs.

the for Loop in Angular

The for loop is convenient, and it is used to repeat a code a number of times either to display data.

To understand it, let’s go through an example of for loop in AngularJs. First of all, we will create a template.

# angularjs
<div ng-app='ForApp' ng-repeat="n in [] | repeat:5">
    <h1>{{n}}</h1>
</div>

In the code above, we used ng-repeat. Now, let’s write a for loop to display the value of n.

# angularjs
var myApp = angular.module('ForApp', []);
myApp.filter('repeat', function() {
  return function(input, range) {
    range = parseInt(range);
    for (var i=0; i<range; i++)
      input.push(i);
    return input;
  };
});

The code above will output n value five times.

for loop in angularjs

As you can see in the image, the above code shows the value of n five times. We can also use the for loop to repeat a particular HTML code a number of times.

# angularjs
<div ng-app='ForApp' ng-repeat="n in [] | repeat:5">
    <h1>Repeated for {{n}} times</h1>
</div>

Output:

for loop in angularjs for repeating

In this way, we can use the for loop in AngularJs.

Write for us
DelftStack articles are written by software geeks like you. If you also would like to contribute to DelftStack by writing paid articles, you can check the write for us page.