AngularJS Init: ng-init

ng-init

---o0o---

Original link

I. ng-init: Initialize application variables.

1. One variable

	
<div ng-app="" ng-init="firstName='John'">
	<p>The name is <span ng-bind="firstName"></span></p>
</div>
	

The name is

2. Multiple varibles

	
<div ng-app="" ng-init="quantity=1;cost=5">
	

II. AngularJS Expressions

• are written inside double braces: {{ a + b }}.

• binds data to HTML the same way as the ng-bind directive.

  Ex: {{ firstName + " " + lastName }} <=> <span ng-bind="firstName + ' '+ lastName"></span>

• "output" data exactly where the expression is written

	
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
===> My first expression: 10
	

1. AngularJS Numbers

	
<div ng-app="" ng-init="quantity=1;cost=5">
	<p>Total in dollar: {{ quantity * cost }}</p>
</div>
===> Total in dollar: 5
	

2. AngularJS Strings

	
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
	<p>The name is {{ firstName + " " + lastName }}</p>
</div>
===>The name is John Doe
	

3. AngularJS Arrays

	
<div ng-app="" ng-init="points=[1,15,19,2,40]">
	<p>The third result is {{ points[2] }}</p>
</div>
===>The third result is 19
	

4. AngularJS Objects

	
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
	<p>The name is {{ person.lastName }}</p>
</div>
===>The name is Doe
	

5. Object in Array

	
<div ng-app="" ng-init="points=[1,15,{firstName:'John',lastName:'Doe'},2,40]">
	<p>The third result is {{ points[2]}}</p>
	<p>The third result is {{ points[2]['firstName'] }}</p>
</div>
===>The third result is {"firstName":"John","lastName":"Doe"}
===>The third result is John
	

6. Array in Object

	
<div ng-app="" ng-init="person={firstName:'John',lastName:[1,15,19,2,40]}">
	<p>The name is {{ person.lastName }}</p>
	<p>The name is {{ person.lastName[3]}}</p>
</div>
===>The name is [1,15,19,2,40]
===>The name is 2
	

Using ng-init is not very common. You will learn how to initialize data by ng-controllers.