AngularJS ng-repeat directive

ng-repeat is similar to foreach loop in C#.

Let us understand this with an example. Here is what we want to do.
1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee

Firstname
Lastname
Gender
Salary

This can be achieved very easily using ng-repeat directive
Script.js : The controll function builds the model for the view. The model employees has the list of all employees.

var app = angular

.module("myModule", [])

.controller("myController", function($scope) {

var employees = [

{ firstName: "Ben", lastName: "Hastings", gender: "Male", salary: 55000 },

{ firstName: "Sara", lastName: "Paul", gender: "Female", salary: 68000 },

{ firstName: "Mark", lastName: "Holland", gender: "Male", salary: 57000 },

{ firstName: "Pam", lastName: "Macintosh", gender: "Female", salary: 53000 },

{ firstName: "Todd", lastName: "Barber", gender: "Male", salary: 60000 }

];

$scope.employees = employees;

});

HtmlPage1.html : In the view, we are using ng-repeat directive which loops thru each employee in employees array. For each employee, we a get a table row, and in each table cell of the table row, the respective employee details (Firstname, Lastname, Gender, Salary) are retrieved using the angular binding expression.

<!DOCTYPE html>

<head>

<title>& lt;/title>

</head>

<table>

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Gender</th>< /span>

<th>Salary</th>< /span>

</tr>

</thead>

<tbody>

<td> {{ employee.firstName }} </td>

<td> {{ employee.lastName }} </td>

<td> {{ employee.gender }} &l t;/td>

<td> {{ employee.salary }} &l t;/td>

</tr>

</tbody>

</table>

</div></ span>

</body>

</html>

Nested ng-repeat example : The model contains an array of countries, and each country has an array of cities. The view must display cities nested under their respective country.

Script.js : The model is an array of countries. Each country contains an array of cities.

var app = angular

.module("myModule", [])

.controller("myController", function($scope) {

var countries = [

{

cities: [

{ name: "London" },

{ name: "Birmingham" },

{ name: "Manchester" }

]

{

cities: [

{ name: "Los Angeles" },

{ name: "Chicago" },

{ name: "Houston" }

]

{

cities: [

{ name: "Hyderabad" },

{ name: "Chennai" },

{ name: "Mumbai" }

]

}

];

$scope.countries = countries;

});

HtmlPage1.html : Notice that we are using two ng-repeat directives in the view, one nested inside the other. The outer ng-repeat directive loops thru each country in the model. The inner ng-repeat directive loops thru each city of a given country.

<!DOCTYPE html>

<head>

<title>& lt;/title>

</head>

<li>

<ul>

</li>

</ul>

</li>

</ul>

</div></ span>

</body>

</html>

Finding the index of an item in the collection :

To find the index of an item in the collection use $index property
To get the index of the parent element
- Use $parent.$index or
- Use ng-init="parentIndex = $index"

The following example, shows how to retrive the index of the elements from a nested collection

<!DOCTYPE html>

<head>

<title>& lt;/title>

</head>

<li>

{{country.name}} - Index = {{ $index }}

<ul>

{{city.name}} - Parent Index = {{ parentIndex }}, Index = {{ $index }}

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

Chandan's UnBlog

AngularJS ng-repeat directive

0 comments :

A Responsive Blogger Website, That Take my blog to the next level.

Sign Up for Email Updates

AngularJS ng-repeat directive

0 comments :