AngularJS Expressions
AngularJS Expressions is used for binding HTML controls with model-data.
Uses:
-
- ng-bind: Expressions can be defined inside ng-bind={{expression}}.
- {{expression}}: double curly braces can be used with model-object name in between them or an expression.
When an expression is supplied, AngularJS resolves the expression and returns the result on the element. We can use model variables to create expressions.
Example:
<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<style>
body
{
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body ng-app>
<p>10+2 = {{10+2}}</p>
<p>
Enter any two numbers to multiply:
<input type="number" ng-model="num1" />
<input type="number" ng-model="num2" />
</p>
<p>Your answer: {{num1*num2}}</p>
</body>
</html>
VIEW DEMO
The expression {{10+2}} will result in 12 and the expression {{num1*num2}} will return multiplication of two numbers defined in the input which has ng-model to it. In the above example we are using integers to get sum and multiplication results. In the same manner we can create string expressions as well.
AngularJS Expressions for String:
You can use string parameters inside an Expression to concate two or more string variables.
Example:
<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<p>First Name: <input type='text' ng-model='firstName'/></p>
<p>Last Name: <input type='text' ng-model='lastName'/></p>
<p>Select domain Name: <select ng-model='domain'>
<option value="@parallelcodescom-79f94a.ingress-daribow.easywp.com">ParallelCodes</option>
<option value="@gmail.com">Gmail</option>
<option value="@outlook.com">Outlook</option>
<option value="@yahoo.com">Yahoo</option>
</select>
</p>
<p>Name:<span ng-bind='firstName+" "+ lastName'></span></p>
<p>Your Email address sample: <b>{{firstName+domain}}</b></p>
</body>
</html>
AngularJS Expressions with JSON Objects:
AngularJS expressions also supports json objects. You can print an object child elements using Expressions.
Example:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init='info={city:"Madrid",country:"Spain",population:"3.3 million (as on 10th Sep 2020)"}'>
<p>City:<span ng-bind='info.city'></span></p>
<p>Population:{{info.population}}</p>
<p>Country:{{info.country}}</p>
</div>
</body>
</html>
OUTPUT:
Here we have used ng-init directive. We discuss this directive in details in next section of this tutorial.
AngularJS Expressions using Arrays:
Expressions also supports Array object. We can print a particular child in an javascript array object.
Example:
<html>
<head>
<title>AngularJS - Expressions using Arrays</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init='days=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]'>
<p><span ng-bind='days[0]'></span></p>
<p>{{days[1]}}</p>
<p>{{days[2]}}</p>
<p>{{days[3]}}</p>
<p>{{days[4]}}</p>
<p>{{days[5]}}</p>
<p>{{days[6]}}</p>
</div>
</body>
</html>
OUTPUT:
