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.

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<scriptsrc="Scripts/angular.min.js"></script>

<scriptsrc="Scripts/Script.js"></script>

</head>

<bodyng-app="myModule">

<divng-controller="myController">

<table>

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Gender</th>

<th>Salary</th>

</tr>

</thead>

<tbody>

<trng-repeat="employee in
employees">

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

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

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

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

</tr>

</tbody>

</table>

</div>

</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 = [

{

name: "UK",

cities: [

{ name: "London" },

{ name: "Birmingham" },

{ name: "Manchester" }

]

},

{

name: "USA",

cities: [

{ name: "Los Angeles" },

{ name: "Chicago" },

{ name: "Houston" }

]

},

{

name: "India",

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.

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<scriptsrc="Scripts/angular.min.js"></script>

<scriptsrc="Scripts/Script.js"></script>

</head>

<bodyng-app="myModule">

<divng-controller="myController">

<ulng-repeat="country in
countries">

<li>

{{country.name}}

<ul>

<ling-repeat="city in country.cities">

{{city.name}}

</li>

</ul>

</li>

</ul>

</div>

</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

3 comments:

Hi Venkat, great videos which clearly makes us to understand the concepts easily, Here i have one doubt can u please clarify it, Can we use same ng-app defined in script.js file in multiple html pages?﻿