ng-init Directive In AngularJS

Akshay Phadke
Jul 27, 2016
5k
0
0
Article

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.

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

In div element, we are going to use 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 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.

<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 ng-repeat directive as:

<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 as:

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 as:

<body ng-app="mymodule">
<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.

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 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:

/// <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:

output

We got 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 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:

<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.

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

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

code

Now, run the 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

<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.

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.

<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>