AngularJS ng-Repeat Directive

Akshay Phadke
8y
4.5k
0
2

Article

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:

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
{
var employees = [];
});

Now, in it, we will add FirstName, Address, PhoneNumber and Salaries.

Created objects employees

{ firstName: "Akshay", Address: "Mumbai", PhoneNumber: "12345", Salary: "1234" },
{ firstName: "Hari", Address: "Mumbai", PhoneNumber: "1234533", Salary: "12345" },
{ firstName: "Milind", Address: "Mumbai", PhoneNumber: "1234556", Salary: "123477" },
{ firstName: "Raghavan", Address: "Pune", PhoneNumber: "69874", Salary: "8888" },
{ firstName: "Hari", Address: "Mumbai", PhoneNumber: "2525", Salary: "5555" }

Thus, our final code is:

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
{
var employees = [{
firstName: "Akshay",
Address: "Mumbai",
PhoneNumber: "12345",
Salary: "1234"
}, {
firstName: "Hari",
Address: "Mumbai",
PhoneNumber: "1234533",
Salary: "12345"
}, {
firstName: "Milind",
Address: "Mumbai",
PhoneNumber: "1234556",
Salary: "123477"
}, {
firstName: "Raghavan",
Address: "Pune",
PhoneNumber: "69874",
Salary: "8888"
}, {
firstName: "Hari",
Address: "Mumbai",
PhoneNumber: "2525",
Salary: "5555"
}];
$scope.employees = employees;
});

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:

<thead>
<tr>
<td>FirstName :</td>
<td>Address :</td>
<td>PhoneNumber :</td>
<td>Salary :</td>
</tr>
</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:

<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.firstName}}</td>
<td>{{employee.Address}}</td>
<td>{{employee.PhoneNumber}}</td>
<td>{{employee.Salary}}</td>
</tr>
</tbody>

Final ASPX page is given below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Angular.aspx.cs" Inherits="Angular_JS.Angular" %>
<!DOCTYPE html>
<html ng-app="mymodule">
<head runat="server">
<title>Overview Angular </title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/mytest.js"></script>
</head>
<body ng-controller="myController">
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<td>FirstName :</td>
<td>Address :</td>
<td>PhoneNumber :</td>
<td>Salary :</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.firstName}}</td>
<td>{{employee.Address}}</td>
<td>{{employee.PhoneNumber}}</td>
<td>{{employee.Salary}}</td>
</tr>
</tbody>
</table> <br /><br /><br /> </div>
</form>
</body>
</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:

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
{
var semester = [];
}

Now, we need to create semesters and their respective subjects.

Thus, in this array, kindly add:

{
name: "FirstSem",
Test: [{
name: "LetsUsC"
}, {
name: "DiscreteMaths"
}]
}

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:

/// <reference path="angular.min.js" />
//Create a module
var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
{
var semester = [{
name: "FirstSem",
Test: [{
name: "LetsUsC"
}, {
name: "DiscreteMaths"
}]
}, {
name: "SecondSem",
Test: [{
name: "PNS"
}, {
name: "OOPS"
}]
}, {
name: "ThirdSem",
Test: [{
name: "Java"
}, {
name: "DCN"
}]
}];
$scope.semester = semester;
});

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:

<li ng-repeat="sem in semester">

We are going to display semester first in the following manner:

<ul>
<li ng-repeat="sem in semester">
{{sem.name}}
</li>
</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:

<ul>
<li ng-repeat="student in sem.Test">
{{student.name}}
</li>
</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:

<ul>
<li ng-repeat="sem in semester">
{{sem.name}}
<ul>
<li ng-repeat="student in sem.Test">
{{student.name}}
</li>
</ul>
</li>
</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:

{{sem.name}} Index ={{$index}}

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

<ul>
<li ng-repeat="sem in semester">
{{sem.name}} Index ={{$index}}
<ul>
<li ng-repeat="student in sem.Test">
{{student.name}} parentindex={{$parent.$index}}, Index ={{$index}}
</li>
</ul>
</li>
</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:

<li ng-repeat="sem in semester" ng-init="ParentIndex=$index">

Assigning to binding expression is shown below:

{{student.name}} parentindex={{ParentIndex}}, Index ={{$index}}

Hence, our final code is:

<ul>
<li ng-repeat="sem in semester" ng-init="ParentIndex=$index">
{{sem.name}} Index ={{$index}}
<ul>
<li ng-repeat="student in sem.Test">
{{student.name}} parentindex={{ParentIndex}}, Index ={{$index}}
</li>
</ul>
</li>
</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.

Up Next

Ebook Download

View all

Azure in 24 Days

Read by 0 people

Download Now!

Learn

View all