AngularJS Expressions

In angularJS expressions are used to bind application data to html, it is a code that is mainly placed inside double braces.

Syntax:

{{ expression }}

Examples (Using Number):
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app>
<span>Sum of 5 and 3 is: {{ 3 + 5 }}</span>
</div>
</body>
</html>

OUTPUT:
Sum of 5 and 3 is: 8

Examples:
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”pi=3.14; r=2″>
<p>Area: {{ pi*r*r }}</p>
</div>
</body>
</html>

OUTPUT:
Area: 12.56

Examples (Using String):
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”fName=’Albert’;lName=’Martin'”>
<p>Hello {{ fName + ” ” +lName }}</p>
</div>
</body>
</html>

OUTPUT:
Hello Albert Martin

Examples (Using Object):
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”emp={fname:’Albert’,lname:’Martin’}”>
<p>Employee Name: {{ emp.fname + ” ” + emp.lname }}</p>
</div>
</body>
</html>

OUTPUT:
Employee Name: Albert Martin

Examples (Using Array):
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=”” ng-init=”myArr=[45,50,85,63]”>
Value on 2nd place: <span ng-bind=”myArr[1]”></span>
</div>
</body>
</html>

OUTPUT:
Value on 2nd place: 50

Leave a Reply