Post
Ask Question

ng-init Directive In AngularJS

Overview

In this article, we will see what the ng-init directive 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.

<body>  
    <form id="form1" runat="server">  
        <div> </div>  
    </form>  
</body>  
</html>  

In the div element, we are going to use the ng-init directive. We will create an expression, which will contain an array of employees.

<div ng-init="employees = [
{ name: 'Akshay', gender: 1, dateOfBirth: new Date('July 21, 1960'), Address: 'Mumbai', Salary: '1234.34' },
{ name: 'Milind', gender: 2, dateOfBirth: new Date('July 20, 1960'), Address: 'Nashik', Salary: '12.34' },
{ name: 'Raghvan', gender: 1, dateOfBirth: new Date('July 19, 1960'), Address: 'Pune', Salary: '1235.34' },
{ name: 'Hari', gender: 1, dateOfBirth: new Date('July 18, 1960'), Address: 'Mumbai', Salary: '5589.34' }
]">
</div>

As we included the ng-init directive in the div element, we don’t have to include it again. It will be reflected in child elements also.

In this, we will present the data in a table and the elements to display those header elements.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>gender</th>
            <th>dateOfBirth</th>
            <th>Address</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

In this, we will loop through those records in an array with the ng-repeat directive.

<tr ng-repeat="employee in employees"></tr>

We will use the binding expression to display the data.

<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.dateOfBirth}}</td>
<td>{{employee.Address}}</td>
<td>{{employee.Salary}}</td>

You can also write the employees in the controller file and specify the controller name in ng-init.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {
    var employees = [
        { name: "Akshay", gender: 1, dateOfBirth: new Date("July 21,1960"), Address: "Mumbai", Salary: "1234.34" },
        { name: "Milind", gender: 2, dateOfBirth: new Date("July 20,1960"), Address: "Nashik", Salary: "12.34" },
        { name: "Raghvan", gender: 1, dateOfBirth: new Date("July 19,1960"), Address: "Pune", Salary: "1235.34" },
        { name: "Hari", gender: 1, dateOfBirth: new Date("July 18,1960"), Address: "Mumbai", Salary: "5589.34" }
    ];
    $scope.employees = employees;
});

Now, just add the controller name and model name.

<body ng-app="mymodule">
    <div ng-init="myController">

You should always use a controller instead of ng-init to initialize the $scope.

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

First, we will create an array.

Here, I created an array called semester.

var mypartone = angular
    .module("mymodule", [])
    .controller("myController", function ($scope) {
        var semester = [];
    });

Now, we need to create semesters and their respective subjects.

In this array, kindly add.

{
    name: "FirstSem",
    Test: [{
        name: "LetsUsC"
    }, {
        name: "DiscreteMaths"
    }]
}

As you can see above, I created a name called FirstSem and also created another array called Test to display the various subjects and in this Test array, I had passed the various subjects. Create two more arrays for the second sem and third sem so our model is.

/// <reference path="angular.min.js" />
// Create a module
var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {
    var semester = [{
        name: "FirstSem",
        Test: [{
            name: "LetsUsC"
        }, {
            name: "DiscreteMaths"
        }]
    }, {
        name: "SecondSem",
        Test: [{
            name: "PNS"
        }, {
            name: "OOPS"
        }]
    }, {
        name: "ThirdSem",
        Test: [{
            name: "Java"
        }, {
            name: "DCN"
        }]
    }];
    $scope.semester = semester;
});

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.

<ul>
    <li ng-repeat="sem in semester">{{sem.name}}</li>
</ul>

Now, just run the solution. We will see the output as.

First sem

We have various semesters. Now, we will display the subjects. Now, create another <ul> list as.

<ul>  
    <li ng-repeat="student in sem.Test"> {{student.name}} </li>  
</ul>  

In <li> tag, I had written student in sem.test as our Test array contains the various subjects and bound it with the student.name.

You can see in our final code, that we had nested ng-repeat, as shown below.

<ul>  
    <li ng-repeat="sem in semester"> {{sem.name}}  
        <ul>  
            <li ng-repeat="student in sem.Test"> {{student.name}} </li>  
        </ul>  
    </li>  
</ul>  

Now, just run the solution.

Local host

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

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

Code

Now, run the solution.

Index

As you can see, we got the index positions.

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

Code

<ul>  
    <li ng-repeat="sem in semester"> {{sem.name}} Index ={{$index}}  
        <ul>  
            <li ng-repeat="student in sem.Test"> {{student.name}} parentindex={{$parent.$index}}, Index ={{$index}} </li>  
        </ul>  
    </li>  
</ul>  

Now, run the solution.

First index

You got the parent index.

The other way to find out the parent index is to use the 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 binding expression.

<li ng-repeat="sem in semester" ng-init="ParentIndex=$index">  

Assigning to binding expression is shown below.

{{student.name}} parentindex={{ParentIndex}}, Index = {{$index}}

Thus, our final code will be.

<ul>
    <li ng-repeat="sem in semester" ng-init="ParentIndex=$index">
        {{sem.name}} Index = {{$index}}
        <ul>
            <li ng-repeat="student in sem.Test">
                {{student.name}} parentindex={{ParentIndex}}, Index = {{$index}}
            </li>
        </ul>
    </li>
</ul>


Similar Articles