Suggested Videos
Part 3 - Controllers in AngularJS
Part 4 - AngularJS ng-src directive
Part 5 - Two way databinding in AngularJS
In this video we will discuss
1. ng-repeat directive in Angular
2. Nesting ng-repeat with an example
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
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.
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.
Script.js : The model is an array of countries. Each country contains an array of cities.
Finding the index of an item in the collection :
Part 3 - Controllers in AngularJS
Part 4 - AngularJS ng-src directive
Part 5 - Two way databinding in AngularJS
In this video we will discuss
1. ng-repeat directive in Angular
2. Nesting ng-repeat with an example
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-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.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<ul ng-repeat="country in
countries">
<li>
{{country.name}}
<ul>
<li ng-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"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<ul ng-repeat="country in
countries" ng-init="parentIndex =
$index">
<li>
{{country.name}} - Index = {{ $index }}
<ul>
<li ng-repeat="city in country.cities">
{{city.name}} - Parent Index = {{ parentIndex }}, Index = {{ $index }}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
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?
ReplyDeleteHello,
ReplyDeleteSuppose I want to use the dike dislike functionality in my project and I dont want the repeat process. In that case what should i have to write in the place of ng-repeat?
Thanks
same thing in my project
ReplyDeletei have nested list,i have to hide by default when user click particular
country then i have to show states in it.
i want show and hide states based on user clicked country.
help how do i achieve this