AngularJS ng init directive

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.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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]
[head]
[title][/title]
[/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"]
[/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]
[head]
[title][/title]
[/head]
[body ng-app="myModule"]
[div ng-controller="myController"]
[ul]
[li ng-repeat="country in countries" ng-init="parentIndex = $index"]
[ul]
[/li]
[/ul]
[/li]
[/ul]
[/div]
[/body]
[/html]

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" },
]
}
];

});

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[sanchitmore]

I looked for many videos and stack for the explanation..but the way you explained is really superb sir..and the way of you speak never get bored anytime..learned alot..

[AmirKMilbes]

You are the BEST Teacher in the planet!

[persistencej]

Your Tutorials are so helpful to the beginners ... Thanks a lot

[veeru]

Your tutorials are very helpful in learning the subject. Thank you.

[sijimathew]

great tutorial.. waiting for implementation of angular JS using MVC and Web API. :)

[AndersRapp]

Another handy use for this directive could be:

ng-init="name = employee.firstName + ' ' + employee.lastName"

to show an employees full name in one column. Is this a good idea? Also, keep up the good videos! They are very helpful and you're very pleasant to listen to. :)

[rickywong]

good tutorial. hope that we can see more tutorials such as NodeJS

[bhajanpreet]

Nice work there Venkat, Just a small suggestion, While naming videos can you please start the name with number like "01 - AngularJS - abc" for first video in the series and so on.

[ashishranjan]

Awesome source of knowledge ... and the way you explained is too good... really liked it

[mutungiian]

Nice I just like angularjs ..its awesome

[ehteshamalam]

cool sir... :)
 will you provide this Angular jS Example with database using entity framework in mvc..???

[harshalvibhute]

superbb !!! thank you so much sir ....

[raqibul]

Nice work. Just a small suggestion, While naming videos can you please start the name with number like "01 - AngularJS - abc" for first video in the series and so on.

Thanks a trillion.

[mahenderkavati]

thanks I too waiting for angular using mvc & web api

[pavanbirajdar]

thanks sir waiting for angular js with MVC

[nattsurfaren]

I'm asking myself why create array in the controller instead of ng-init. Is it solely to keep layers as intended please? Data handling in the controller?

[yehoshualevin]

Use the link in the description if you want the html with angle-brackets

[punkyjoe]

I think I have done this..oh yeah I remember, on video "6" ng-repeat directive part..

[jyotibarasker]

hello sir can you please provide the tutorial for how to use angularJs with PHP for dynamically updating the data.

[fengzhang]

Good lectures. How ever, this ng-init session does not provide a valid use case. The use case here is said to be replaced by ng-controller.