AngularJs #10 How To Use ng-init Directives in Angular JS ( Tutorial )

Image Source

What Will I Learn?

I will learn how to use the ng-init directive to evaluate an expression and to use it with the ng-repeat directive.

• How to use the ng-init directive to evaluate an expression ( array of employees in this example )
• How to use the index of elements to prov the places of elements in our list
• How to use the ng-init directive with the ng-repeat directive .

Requirements

• Basic Knowledge of HTML and CSS language .
• Basic Knowledge of JavaScript language .
• Has an editor text support HTML and JavaScript .
• Must has the angular files from the official site .

Difficulty

• Basic

Tutorial Contents

In this tutorial we will discuss how to use the ng-init directive in angular JS , this directive allows you to evaluate an expression in the current scope , let's explain what I mean by this sentence with an example .

I created a simple HTML page with a div , this div has an attribute which is the ng-init directive am going to use this directive to evaluate an expression which is the array of employees each employee has the name , gender and city proprieties since we are using the ng-init directive on this div element this employees array will be available with this div , now we should display these elements I have created a table with three table headers " Name , Gender and City " and I used the ng-repeat directive to loop the employees that we initialized and this is the result :

So here we just used the ng-init to evaluate the employees array it's basically initialize the data needs but in the real world application you should use a controller instead of ng-init directive to initialize values on a scope so that's the job of the controller , so when we used the ng-init to provide the data it's the responsability of the ng-controller

Here I have create a controller function with the name of control and the function with the $scope parameter and I just move the array to a variable and attache it with the scope object , we go to the HTML page

Here I used the ng-controller directive in a place of the ng-init directive and this is the same result :

So the ng-init directive should be used for aliasing special proprieties of ng-repeat directive let's understand what I mean by this statement with an example :

I created an array named " countries " in this array I have two elements the name of the country and the cities that it has for example I just choose two cities by the name of the city , let's go to the HTML view

To change a little and to be more logical I used a list into list to display the countries and the cities by the ng-repeat firstly I used the country in countries but in the second loop I used the city in the country but this city in the cities of this country and this is the result

So I have now the countries and tier cities by unordered list I want now to display the index of each element of these countries and this is how to do it

I used the $index propriety to display the index of our element and I just choose the ' index = ' expression to be more clear and this is the result

Look at the index so the first element has the index 0 and inside this element the first city also has the index 0 the second city has the index 1 also for the second county is 2 , now I want to display the parent index of our element , to do it I must save the parent index of our element for that I will use the ng-init directive ..

To use the parent index we must use the ng-init directive to save the value of index of the parent and just we call it we call this variable to put the value of our parent and this is the result

So the index of USA is 0 and for India is 1 so the cities of India has this value for parent index and the USA also and that what means ng-init directive should be used for aliasing special proprieties of ng-repeat .

Curriculum

• AngularJs #06 How To Handle Events , And Search Filter In Angular JS ( Tutorial )
  
• AngularJs #07 How To filter by multiple properties in Angular JS ( Tutorial )
  
• AngularJs #08 How To Create A Custom Filter in Angular JS ( Tutorial )
  
• AngularJs #09 How To Use ng-show And ng-hide Directives in Angular JS ( Tutorial )
  

---

Posted on Utopian.io - Rewarding Open Source Contributors

---