Site icon Pro Liferay

Angular JS Expression

angular-js-expression


In angular JS, expression starts with {{ and ends with }}. So an angular JS expression looks like {{expression}}. In this tutorial we will look into various examples of Angular JS Expressions.

[example title=”Example1:Adding two numbers. For below example the output is 7″]

<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=””>
{{5+2}}
</div>
</body>
</html>

[/example]

[example title=”Example2:Initialize variables before using in the expression”]

<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”firstName=’Hamidul’;lastName=’Islam'”>
Full Name is:{{firstName + ” “+lastName}}
</div>
</body>
</html>

[/example]

Explanation: In the above example the firstName and lastName are initialized.  The output of the above example is

Full Name is:Hamidul Islam

[example title=”Example3:Addition and Multiplication of two numbers”]

<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”number1=3;number2=5″>
Addition of the two numbers:{{number1+number2}}
<br/>
Multiplication of the two numbers:{{number1*number2}}
</div>
</body>
</html>

[/example]

The output of the above example is

Addition of the two numbers:8
Multiplication of the two numbers:15

[example title=”Example4:Using object in expression”]

<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”customer={firstName:’Jan’,lastName:’Marc’}”>

<p>Customer last name is {{ customer.lastName }}</p>

</div>
</body>
</html>

[/example]

In the above example the customer is JSON object which is initialized using ng-init.The output is

Customer last name is Marc

[example title=”Example5:Using array in expression”]

<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”numbers=[10,11,190,20,44]”>

<p>The third number is {{ numbers[2] }}</p>

</div>
</body>
</html>

[/example]

In the above example numbers is an array which contains some numbers. The output is

The third number is 190

Exit mobile version