19 Feb 2016
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>
<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>
<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>
<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>
<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>
<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
About Author
bestonetechnologies
I am a software developer.
