AngularJS ng-Repeat Directive

In this article, you will learn about AngularJS ng-Repeat Directive.

Overview

Today, in this article, we are going to see how we can use ng-repeat directive in Angular JS and also the nesting of ng-repeat directive. Kindly refer to my previous article for more .

Let's start,

Introduction

Here, I want to display EmployeeName, Address, Phone number and their respective salaries.

Suppose I want to display five records and ng-repeat directive is similar to for loop in C#. We will understand, that we need to build a model first and need to add employees array. Thus, switch to VS.

I created an array called employees, given below:

  1. var mypartone = angular.module("mymodule", []).controller("myController", function($scope)  
  2. {  
  3.     var employees = [];  
  4. });  
Now, in it, we will add FirstName, Address, PhoneNumber and Salaries.

Created objects employees
  1. { firstName: "Akshay", Address: "Mumbai", PhoneNumber: "12345", Salary: "1234" },  
  2. { firstName: "Hari", Address: "Mumbai", PhoneNumber: "1234533", Salary: "12345" },  
  3. { firstName: "Milind", Address: "Mumbai", PhoneNumber: "1234556", Salary: "123477" },  
  4. { firstName: "Raghavan", Address: "Pune", PhoneNumber: "69874", Salary: "8888" },  
  5. { firstName: "Hari", Address: "Mumbai", PhoneNumber: "2525", Salary: "5555" }  
Thus, our final code is:
  1. var mypartone = angular.module("mymodule", []).controller("myController", function($scope)  
  2. {  
  3.     var employees = [{  
  4.         firstName: "Akshay",  
  5.         Address: "Mumbai",  
  6.         PhoneNumber: "12345",  
  7.         Salary: "1234"  
  8.     }, {  
  9.         firstName: "Hari",  
  10.         Address: "Mumbai",  
  11.         PhoneNumber: "1234533",  
  12.         Salary: "12345"  
  13.     }, {  
  14.         firstName: "Milind",  
  15.         Address: "Mumbai",  
  16.         PhoneNumber: "1234556",  
  17.         Salary: "123477"  
  18.     }, {  
  19.         firstName: "Raghavan",  
  20.         Address: "Pune",  
  21.         PhoneNumber: "69874",  
  22.         Salary: "8888"  
  23.     }, {  
  24.         firstName: "Hari",  
  25.         Address: "Mumbai",  
  26.         PhoneNumber: "2525",  
  27.         Salary: "5555"  
  28.     }];  
  29.     $scope.employees = employees;  
  30. });  
Now, we want to present this data within a tabular format. 

In this table, I added a <thead> section and respective tr and td to display the details, given below:
  1. <thead>  
  2.     <tr>  
  3.         <td>FirstName :</td>  
  4.         <td>Address :</td>  
  5.         <td>PhoneNumber :</td>  
  6.         <td>Salary :</td>  
  7.     </tr>  
  8. </thead>  
I am going to add <tbody> section and in this <tbody>, we will display the records. 

In this <tbody> section, we will add a <tr> and <td> section.

In this <tr> section, we will add ng-repeat directive as:

<tr ng-repeat="employee in employees">

Thus, read it as an employee in our model, which is called employees.

Hence, our <tbody> section code is:
  1. <tbody>  
  2.     <tr ng-repeat="employee in employees">  
  3.         <td>{{employee.firstName}}</td>  
  4.         <td>{{employee.Address}}</td>  
  5.         <td>{{employee.PhoneNumber}}</td>  
  6.         <td>{{employee.Salary}}</td>  
  7.     </tr>  
  8. </tbody>  
Final ASPX page is given below:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Angular.aspx.cs" Inherits="Angular_JS.Angular" %>  
  2.     <!DOCTYPE html>  
  3.     <html ng-app="mymodule">  
  4.   
  5.     <head runat="server">  
  6.         <title>Overview Angular </title>  
  7.         <script src="Scripts/angular.js"></script>  
  8.         <script src="Scripts/mytest.js"></script>  
  9.     </head>  
  10.   
  11.     <body ng-controller="myController">  
  12.         <form id="form1" runat="server">  
  13.             <div>  
  14.                 <table>  
  15.                     <thead>  
  16.                         <tr>  
  17.                             <td>FirstName :</td>  
  18.                             <td>Address :</td>  
  19.                             <td>PhoneNumber :</td>  
  20.                             <td>Salary :</td>  
  21.                         </tr>  
  22.                     </thead>  
  23.                     <tbody>  
  24.                         <tr ng-repeat="employee in employees">  
  25.                             <td>{{employee.firstName}}</td>  
  26.                             <td>{{employee.Address}}</td>  
  27.                             <td>{{employee.PhoneNumber}}</td>  
  28.                             <td>{{employee.Salary}}</td>  
  29.                         </tr>  
  30.                     </tbody>  
  31.                 </table> <br /><br /><br /> </div>  
  32.         </form>  
  33.     </body>  
  34.   
  35.     </html>  
Now, just run the solution and you will see the output as:

output

As you can see from the output, given above, we got the desired result.

Thus, in creating a simple ng-repeat directive, we will see, how can we do nesting of ng-repeat directive.

Nesting ng-repeat directive

In the earlier part, we had seen how ng-repeat directive works. In nesting ng-repeat directive, suppose you want to display an ordered list elements in the page here, you have to use nesting ng-repeat directive.

Let's see, how can we do this with an example :

Now, here I want to see MCA FirstSem,SecondSem and ThirdSem subjects.

First, we will create an array.

Here, I had created an array called semester:
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope) 
  2. {  
  3.             var semester = [];  
  4. }
Now, we need to create semesters and their respective subjects.

Thus, in this array, kindly add:
  1. {  
  2.     name: "FirstSem",  
  3.     Test: [{  
  4.         name: "LetsUsC"  
  5.     }, {  
  6.         name: "DiscreteMaths"  
  7.     }]  
  8. }  
As you can see in the screenshot, shown above, I had created a name called FirstSem and also created another array called Test to display various subjects. In Test array, I had passed various subjects. Create two more arrays for the second sem and third sem  and our model will be:
  1. /// <reference path="angular.min.js" />  
  2. //Create a module  
  3. var mypartone = angular.module("mymodule", []).controller("myController"function($scope)  
  4. {  
  5.     var semester = [{  
  6.         name: "FirstSem",  
  7.         Test: [{  
  8.             name: "LetsUsC"  
  9.         }, {  
  10.             name: "DiscreteMaths"  
  11.         }]  
  12.     }, {  
  13.         name: "SecondSem",  
  14.         Test: [{  
  15.             name: "PNS"  
  16.         }, {  
  17.             name: "OOPS"  
  18.         }]  
  19.     }, {  
  20.         name: "ThirdSem",  
  21.         Test: [{  
  22.             name: "Java"  
  23.         }, {  
  24.             name: "DCN"  
  25.         }]  
  26.     }];  
  27.     $scope.semester = semester;  
  28. });  
Now, lets understand how we are going to display these details in our view section.

As we want to display those in list items, first, create a <ul> tag inside <ul> tag write <li> tag in that <li tag>  and write:  
  1. <li ng-repeat="sem in semester">  
We are going to display semester first in the following manner: 
  1. <ul>  
  2.   <li ng-repeat="sem in semester">  
  3.       {{sem.name}}  
  4.   </li>  
  5. </ul>  
Now, just run the solution. We will see the output as:

output

We have various semesters now. We will display the subjects and now create another <ul> list as, shown below:
  1. <ul>  
  2.      <li ng-repeat="student in sem.Test">  
  3.          {{student.name}}   
  4.      </li>  
  5.  </ul>  
In <li> tag, I had written student in sem.test as our Test array contains the various subjects and bound it with student.name

You can see in our final code, that we had nested ng-repeat, as given below:
  1. <ul>  
  2.    <li ng-repeat="sem in semester">  
  3.        {{sem.name}}   
  4.    <ul>  
  5.         <li ng-repeat="student in sem.Test">  
  6.             {{student.name}}   
  7.         </li>  
  8.     </ul>  
  9.        
  10.      </li>  
  11.  </ul>  
Now, just run the solution:

output

You can see, we got the ouput. We nested ng-repeat directive here.

Now, if you want to find out an index, the procedure of it is shown:

How to find index

To find an index, just write this in front of the binding expression as:
  1. {{sem.name}} Index ={{$index}}  
output

Now, run the solution.

output

You can see, we got the index postions.

Now, I had to find out the parentindex postions. Here, in this example, we have only one parent index and these are the subjects. Thus, write as: 

code
  1. <ul>  
  2.    <li ng-repeat="sem in semester">  
  3.        {{sem.name}}  Index ={{$index}}  
  4.    <ul>  
  5.         <li ng-repeat="student in sem.Test">  
  6.             {{student.name}} parentindex={{$parent.$index}},  Index ={{$index}}  
  7.         </li>  
  8.     </ul>  
  9.        
  10.      </li>  
  11.  </ul>  
Now, run the solution.

output

You got the parent index.

The other way to find out the parent index is to use ng-init directive and initialize a variable to it.
Thus, lets see it also. 

Just add ng-init, write any name =$index and just assign the name to the ebinding expression, shown below:
  1. <li ng-repeat="sem in semester" ng-init="ParentIndex=$index">  
Assigning to binding expression is shown below:
  1. {{student.name}} parentindex={{ParentIndex}}, Index ={{$index}}  
Hence, our final code is:
  1. <ul>  
  2.    <li ng-repeat="sem in semester" ng-init="ParentIndex=$index">  
  3.        {{sem.name}}  Index ={{$index}}  
  4.    <ul>  
  5.         <li ng-repeat="student in sem.Test">  
  6.             {{student.name}} parentindex={{ParentIndex}},  Index ={{$index}}  
  7.         </li>  
  8.     </ul>  
  9.        
  10.      </li>  
  11.  </ul>  
Thus, let's run our solution and see:

output

We got an output. Thus, you can use either of the two ways to find out the parent index .

Conclusion: This was all about ng-repeat directive in AngularJS.