Angular-1 Loops

Loops are the essential part of a programming language.  So let’s learn today what are the different ways of using loops in Angular-1.

Loops in HTML file

To loop through a collection in HTML files, angular provides a directive named as ng-repeat, syntax is as follows:

<element ng-repeat="expression"></element>

expression: An expression that specifies how to loop the collection.

Looping through an array of string/number

To loop through an array of string/number in HTML file, we use the very simple syntax of ng-repeat. Syntax is as follows,

<element ng-repeat="item in myArray">
  {{item}}
</element>

Check example below which prints array of names and the array of numbers.

Looping through an array of duplicate values

What if your array contains duplicate values, in that case using simple ng-repeat gives an error, so you need to use track by $index to print all the values, syntax is as follows:

<element ng-repeat="item in myArray track by $index">
  {{item}}
</element>

Have a look at the example below, which contains duplicate names (varun, akram) and duplicates number (3, 7) in array,

Looping through an array of object

To loop through an array of object syntax is very simple, we get a single object on each iteration and  we can use that object to get its properties, syntax is as follows:

<element ng-repeat="obj in myArray">
  {{obj.property1}}
       .
       .
       .
{{obj.propertyN}}
</element>

Check example below in which we have created various objects in the array, each object has 2 properties name and gender,

Looping through an object

To loop through an object in HTML file, syntax is as follows:

<element ng-repeat="(key, value) in myObj">
  {{key}}-{{value}}
</element>

Check example below, in which object contains various properties:

Nested Loops

It is possible when an array itself contains another array inside of it, so you need two ng-repeats one inside the other, syntax is as follows:

<ul>
    <li ng-repeat="item in myArray">
    // print attributes of item
      <li ng-repeat="sub-item in item.myArray">
        // print attributes of sub-item
      </li>
 </li> </ul>

Check the running demo below, in which we have an array of customer objects and each customer object contains an array of order objects,

Loops in JS file (controller,service,etc)

To iterate over a collection in the js file, angular provides forEach loop,  check the syntax below:

angular.forEach(array, iterator, [context])

object: The object to iterate over.
iterator: The iterator function.
context: Object to become context (using this) for the iterator function.

Iterate array of string/number

You get the elements of the array as function parameter on iterating over an array of string/number.

angular.forEach(yourArray, function(itemInArray){
// your code goes here
});

Check example below for iterating over an array of string and array of numbers.

Iterate array of object

The same syntax mentioned above for array of string/number can be used to iterate over the array of objects.

angular.forEach(yourArray, function(objectInArray){
// your code goes here
});

Iterate object

It is very easy even to iterate over an object using forEach, you get key and value as the function parameter on each iteration

angular.forEach(yourArray, function(value, key){
// your code goes here
});