What are expressions in AngularJS ?
Last Updated :
02 Feb, 2022
In this article, we will see the expressions in Angular JS, along with knowing the different methods for implementing it through the code examples.
Expressions in AngularJS, are the statements that are to be evaluated, that is placed inside the double curly braces. The result of the evaluation will be returned exactly where the expression is defined. It helps in performing the data-binding. Data binding refers to the synchronization between the model and the view components. Expressions help in data-binding as they bind the application data to HTML. An important point to note here is that AngularJS expressions cannot contain regular expressions, loops, conditional statements, and functions. Expressions in AngularJS can contain literals, operators, and variables. AngularJS expressions can be used with primitive types like strings and numbers and other types like JavaScript objects and arrays.
There are 2 methods of writing expressions in AngularJS:
- Using the double braces
- Using the ng-bind directive
We will explore both these methods & know their implementation.
Using the double braces: The double curly braces can be used to displays the content from the model to the view component. Whatever is written inside double curly braces, will be displayed exactly at the place the expression is placed.
Syntax:
{{expression}}
Example 1: This example describes the Expressions.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
</script>
</head>
<body ng-app="">
<p>{{100}}</p>
<p>{{100*2}}</p>
</body>
</html>
|
Output:
Example 2: This example describes the Expressions using double braces.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
</script>
</head>
<body ng-app="">
<form>
<label>Enter your name:</label>
<input type="text" ng-model="name">
</form>
<p>Hello {{name}}</p>
</body>
</html>
|
Explanation: In this example, we have taken the name as an input. Then we have printed the message which contains the name that the user entered using the expression written in double braces.
Output:
Using the ng-bind directive: The ng-bind directive can be useful to bind the innerHTML of an element to a model property. If the value of a variable or expression changes, the content of the specified HTML element will change as well.
Syntax:
<element ng-bind="expression"> Contents </element>
Example 3: This example describes the Expressions using ng-bind directive.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
</script>
</head>
<body ng-app="">
<form>
<label>Enter your name:</label>
<input type="text" ng-model="name">
</form>
<p>Hello
<span ng-bind="name"></span>
</p>
</body>
</html>
|
Explanation: In this example, we have taken the name as an input. Using the ng-model directive, we can bind the value of the input to the application data. Then we have printed the name that the user entered using the ng-bind directive.
Output:
Performing operations inside expressions:
We can also perform expressions inside an expression.
Example 4: This example describes the concatenating of 2 strings.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
</script>
</head>
<body ng-app="">
<form>
<label>Enter your first name:</label>
<input type="text" ng-model="firstname">
<br><br>
<label>Enter your last name:</label>
<input type="text" ng-model="lastname">
</form>
<p>Hello {{firstname+" "+lastname}}</p>
</body>
</html>
|
Output:
Example 5: In this example, we are calculating the total amount to be paid according to the quantity of the products entered by the customer.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
</script>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body ng-app="myApp"
ng-controller="myctrl">
<form>
<label>
Enter the quantity of
items to be bought:
</label>
<br>
<br>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Pencil</td>
<td>10</td>
<td>
<input type="number"
ng-model="pencil"
min=0 value="0">
</td>
</tr>
<tr>
<td>Pen</td>
<td>20</td>
<td>
<input type="number"
ng-model="pen"
min=0 value="0">
</td>
</tr>
<tr>
<td>Sharpner</td>
<td>15</td>
<td>
<input type="number"
ng-model="sharpner"
min=0 value="0">
</td>
</tr>
<tr>
<td>Eraser</td>
<td>5</td>
<td>
<input type="number"
ng-model="eraser"
min=0 value="0">
</td>
</tr>
</table>
<p>Total amount to be paid:
{{pencil*10+pen*20+sharpner*15+eraser*5}}
</p>
</form>
<script>
var app = angular.module("myApp", []);
app.controller("myctrl", function($scope) {
$scope.pencil = 0;
$scope.pen = 0;
$scope.sharpner = 0;
$scope.eraser = 0;
});
</script>
</body>
</html>
|
Explanation: In this example, a table is displayed which shows details like the product name and price. The user needs to enter the quantity that he wants to buy and the amount to be paid is displayed.
Output:
Note: The operations performed for calculation of the total amount to be paid is inside the expression:
{{ pencil*10 + pen*20 + sharpner*15 + eraser*5 }}
Example 6: This example describes the Expression in Angular JS by specifying the number, string, array, object.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Expression</title>
<script src=
</script>
</head>
<body ng-app="myApp" ng-controller="myctrl">
<p>Name of the student: {{student.name}}</p>
<p>Age of the student: {{student.age}}</p>
<p>Favourite subject: {{subjects[0]}}</p>
<p>Least favourite: {{subjects[1]}}</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myctrl", function($scope) {
$scope.student = {
"name": "GeeksforGeeks",
age: 20
};
$scope.subjects =
["English", "Hindi",
"Maths", "SST", "Science"];
});
</script>
</body>
</html>
|
Output:
There is one similarity between the AngularJS and JavaScript expressions i.e, both can contain literals, operators and variables.
Comparison between AngularJS & Javascript expressions:
AngularJS Expressions
|
JavaScript Expressions
|
|
These can be written inside HTML.
|
These cannot be written inside HTML.
|
|
These expressions support filters.
|
These expressions do not support filters.
|
|
Conditionals, loops, and exceptions are not supported by them.
|
Conditionals, loops, and exceptions are supported by them.
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...