Suggested Videos
Part 12 - Angularjs filter by multiple properties
Part 13 - Create a custom filter in AngularJS
Part 14 - ng-hide and ng-show in AngularJS
The ng-init directive allows you to evaluate an expression in the current scope.
In the following example, the ng-init directive initializes employees variable which is then used in the ng-repeat directive to loop thru each employee. In a real world application you should use a controller instead of ng-init to initialize values on a scope.
ng-init should only be used for aliasing special properties of ng-repeat directive. In the following example, ng-init is used to store the index of the parent element in parentIndex variable.
Script.js
Part 12 - Angularjs filter by multiple properties
Part 13 - Create a custom filter in AngularJS
Part 14 - ng-hide and ng-show in AngularJS
The ng-init directive allows you to evaluate an expression in the current scope.
In the following example, the ng-init directive initializes employees variable which is then used in the ng-repeat directive to loop thru each employee. In a real world application you should use a controller instead of ng-init to initialize values on a scope.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="employees = [
{ name: 'Ben', gender:
'Male', city: 'London' },
{ name: 'Sara', gender:
'Female', city: 'Chennai' },
{ name: 'Mark', gender:
'Male', city: 'Chicago' },
{ name: 'Pam', gender:
'Female', city: 'London' },
{ name: 'Todd', gender:
'Male', city: 'Chennai' }
]">
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in
employees">
<td> {{ employee.name }}
</td>
<td> {{ employee.gender}} </td>
<td> {{ employee.city}} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ng-init should only be used for aliasing special properties of ng-repeat directive. In the following example, ng-init is used to store the index of the parent element in parentIndex variable.
<!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>
<li ng-repeat="country in
countries" ng-init="parentIndex =
$index">
{{country.name}}
<ul>
<li ng-repeat="city in country.cities">
{{city.name}} - Parent Index = {{ parentIndex }}, Index = {{ $index }}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Script.js
var app = angular
.module("myModule", [])
.controller("myController",
function
($scope) {
var countries = [
{
name: "India",
cities: [
{ name: "Hyderabad" },
{ name: "Chennai" }
]
},
{
name: "USA",
cities: [
{ name: "Los Angeles" },
{ name: "Chicago" },
]
}
];
$scope.countries = countries;
});
No comments:
Post a Comment
It would be great if you can help share these free resources