ng init examples
angularjs ng-init example
angularjs directive ng-init
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=”
[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=”
[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;
});
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
