Angular

ng-init Directive In AngularJS

Overview

In this article, we will see what ng-init directiv is in Angular JS. The ng-init directive allows you to evaluate the current expression in scope. We will see this with an example.

For more articles on AngularJS, kindly refer to,

Introduction: Create a simple page.
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div> </div>  
  4.     </form>  
  5. </body>  
  6.   
  7. </html>  
In div element, we are going to use ng-init directive. We will create an expression, which will contain an array of employees.
  1. <div ng-init="employees = [  
  2. { name: " Akshay ",gender: 1, dateOfBirth: new Date("July 21,1960 "), Address: "Mumbai ", Salary: "1234.34 " },  
  3. { name: "Milind ",gender:2, dateOfBirth: new Date("July 20,1960 "), Address: "Nashik ", Salary: "12.34 " },  
  4. { name: "Raghvan ", gender:1,dateOfBirth: new Date("July 19,1960 "), Address: "Pune ", Salary: "1235.34 " },  
  5. { name: "Hari ", gender:1,dateOfBirth: new Date("July 18,1960 "), Address: "Mumbai ", Salary: "5589.34 " }  
  6.   
  7.   
  8.   
  9. ]"> </div>  
As we included ng-init directive in div element, we don’t have to include it again. It will be refelected in child elements also .

In this, we will present the data in table and th elements to display those header elements.
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th>Name</th>  
  5.             <th>gender</th>  
  6.             <th>dateOfBirth</th>  
  7.             <th>Address</th>  
  8.             <th>Salary</th>  
  9.         </tr>  
  10.     </thead>  
  11. </table>  
In this, we will loop through those records in an array with ng-repeat directive as:
  1. <tr ng-repeat="employee in employees"></tr>  
We will use the binding expression to display the data:
  1. <td>{{employee.name}}</td>  
  2. <td>{{employee.gender}}</td>  
  3. <td>{{employee.dateOfBirth}}</td>  
  4. <td>{{employee.Address}}</td>  
  5. <<td>{{employee.Salary}}</td>  
You can also write the employees in the controller file and specify the controller name in ng-init as:
  1. var mypartone = angular.module("mymodule", []).controller("myController", function($scope)  
  2. {  
  3.     var employees = [{  
  4.         name: "Akshay",  
  5.         gender: 1,  
  6.         dateOfBirth: new Date("July 21,1960"),  
  7.         Address: "Mumbai",  
  8.         Salary: "1234.34"  
  9.     }, {  
  10.         name: "Milind",  
  11.         gender: 2,  
  12.         dateOfBirth: new Date("July 20,1960"),  
  13.         Address: "Nashik",  
  14.         Salary: "12.34"  
  15.     }, {  
  16.         name: "Raghvan",  
  17.         gender: 1,  
  18.         dateOfBirth: new Date("July 19,1960"),  
  19.         Address: "Pune",  
  20.         Salary: "1235.34"  
  21.     }, {  
  22.         name: "Hari",  
  23.         gender: 1,  
  24.         dateOfBirth: new Date("July 18,1960"),  
  25.         Address: "Mumbai",  
  26.         Salary: "5589.34"  
  27.     }];  
  28.     $scope.employees = employees;  
  29. });  
Now, just add the controller name and model name as:
  1. <body ng-app="mymodule">  
  2.   
  3. <div ng-init="myController">  
You should always use a controller instead of ng-init to initialize $scope.

Ng-init should be used for aliasing special properties of ng-repeat directive .

First, we will create an array,

Here, I had created an array called semester.
  1. var mypartone = angular  
  2. .module("mymodule", [])  
  3. .controller("myController", function ($scope) {  
  4. var semester = [  
  5.   
  6. ];  
Now, we need to create semesters and their respective subjects

In this array, kindly add:
  1. {  
  2.     name: "FirstSem",  
  3.     Test: [{  
  4.         name: "LetsUsC"  
  5.     }, {  
  6.         name: "DiscreteMaths"  
  7.     }]  
  8. }  
As you can see above, I created a name called as FirstSem and also created another array called as Test to display the various subjects and in this Test array, I had passed the various subjects. Create two more arrays for second sem and third sem so our model is:
  1. /// <reference path="angular.min.js" />  
  2. //Create a module  
  3. var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {  
  4.     var semester = [{  
  5.         name: "FirstSem",  
  6.         Test: [{  
  7.             name: "LetsUsC"  
  8.         }, {  
  9.             name: "DiscreteMaths"  
  10.         }]  
  11.     }, {  
  12.         name: "SecondSem",  
  13.         Test: [{  
  14.             name: "PNS"  
  15.         }, {  
  16.             name: "OOPS"  
  17.         }]  
  18.     }, {  
  19.         name: "ThirdSem",  
  20.         Test: [{  
  21.             name: "Java"  
  22.         }, {  
  23.             name: "DCN"  
  24.         }]  
  25.     }];  
  26.     $scope.semester = semester;  
  27. });  
Now, let's understand how we are going to display these details in our view section.

As we want to display those in list items, first create a <ul> tag inside <ul> tag, write <li> tag and within <li tag> just write:

<li ng-repeat="sem in semester">

We are going to display the semester first:
  1. <ul>  
  2.     <li ng-repeat="sem in semester"> {{sem.name}} </li>  
  3. </ul>  
Now, just run the solution. We will see the output as:

output
We got various semesters. Now, we will display the subjects. Now, create another <ul> list as:
  1. <ul>  
  2.     <li ng-repeat="student in sem.Test"> {{student.name}} </li>  
  3. </ul>  
In <li> tag, I had written student in sem.test as out Test array contains the various subjects and binded it with the student.name.

You can see in our final code, that we had nested ng-repeat, as shown below:
  1. <ul>  
  2.     <li ng-repeat="sem in semester"> {{sem.name}}  
  3.         <ul>  
  4.             <li ng-repeat="student in sem.Test"> {{student.name}} </li>  
  5.         </ul>  
  6.     </li>  
  7. </ul>  
Now, just run the solution.

solution

To find the index, just write this in front of the binding expression as: 

{{sem.name}} Index ={{$index}}

code

Now, run the solution.

solution

As you can see, we got the index positions.

Now, I had to find out the parentindex postions. Here, in this example, we have only one parent index and those are subjects, so just write as:

code
  1. <ul>  
  2.     <li ng-repeat="sem in semester"> {{sem.name}} Index ={{$index}}  
  3.         <ul>  
  4.             <li ng-repeat="student in sem.Test"> {{student.name}} parentindex={{$parent.$index}}, Index ={{$index}} </li>  
  5.         </ul>  
  6.     </li>  
  7. </ul>  
Now, run the solution.

solution

You got the parent index.

The other way to find out parent index is to use ng-init directive and initialize a variable to it. Thus, let's see it as well. 

Just add ng-init, write any name name=$index and just assign the name to the ebinding expression.
  1. <li ng-repeat="sem in semester" ng-init="ParentIndex=$index">  
Assigning to binding expression is shown below:
  1. {{student.name}} parentindex={{ParentIndex}}, Index ={{$index}}  
Thus, our final code will be:
  1. <ul>  
  2.     <li ng-repeat="sem in semester" ng-init="ParentIndex=$index"> {{sem.name}} Index ={{$index}}  
  3.         <ul>  
  4.             <li ng-repeat="student in sem.Test"> {{student.name}} parentindex={{ParentIndex}}, Index ={{$index}} </li>  
  5.         </ul>  
  6.     </li>  
  7. </ul> 

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs