AngularJS expressions are written inside double curly braces {{expression}}. AngularJS expressions binds data to HTML using ng-bind directive. AngularJS Expressions are like Javascript Expressions i.e. they can contain literals, operators and variables.
Example 1 : Normal Arithmatic Operations
<!DOCTYPE html>
<html>
<body>
<h1> Hello World</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="">
<p>Addition : {{ 7 + 5 }}</p>
<p>Substraction : {{ 7 - 5 }}</p>
<p>Muoltiplication : {{ 7 * 5 }}</p>
<p>Division : {{ 7 / 5 }}</p>
<p>Modulus : {{ 7 % 5 }}</p>
</div>
</body>
</html>
Example 2 : Arithmetic Operations using variables
<!DOCTYPE html>
<html>
<body>
<h3>Example 2 : Arithmetic Operations using variables</h3>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="" ng-init="number1=7;number2=5">
<p>Addition : {{ number1 + number2 }}</p>
<p>Substraction : {{ number1 - number2 }}</p>
<p>Muoltiplication : {{ number1 * number2 }}</p>
<p>Division : {{ number1 / number2 }}</p>
<p>Modulus : {{ number1 % number2 }}</p>
</div>
</body>
</html>
Example 3 : Using Strings
<!DOCTYPE html>
<html>
<body>
<h3>Example 3 : Using String</h3>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="" ng-init="var1='Hello';var2='World'">
<p>Output : {{ var1 + " " + var2 }}</p>
</div>
</body>
</html>
Example 4 : Using Objects
<!DOCTYPE html>
<html>
<body>
<h3>Example 4 : Using Objects</h3>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="" ng-init="variables={var1:'Hello',var2:'World'}">
<p>First Variable : {{ variables.var1 }}</p>
<p>Second Variable : {{ variables.var2 }}</p>
<p>Output : {{ variables.var1 + " " + variables.var2 }}</p>
</div>
</body>
</html>
Example 5 : Using Arrays
<!DOCTYPE html>
<html>
<body>
<h3>Example 5 : Using Arrays</h3>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="" ng-init="year=[2010,2011,2012,2013,2014,2015]">
<p>Year 1 : {{ year[0] }}</p>
<p>Year 2 : {{ year[1] }}</p>
<p>Year 3 : {{ year[2] }}</p>
<p>Year 4 : {{ year[3] }}</p>
<p>Year 5 : {{ year[4] }}</p>
<p>Year 6 : {{ year[5] }}</p>
</div>
</body>
</html>
Instead of using normal {{ expression }} you can also use ng-bind i.e. <span ng-bind="expression"></span>
Please Like and Share the Blog, if you find it interesting and helpful.
No comments:
Post a Comment