Syntax
{{ expression }}
An Angular expression displays the result exactly where it is located or assigned. Let us see an example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app>
My name is <b> {{ 'Arun Banik' }} </b>
</div>
</body>
</html>This is one of simplest example of an Angular expression. See how I have assigned the name inside the curly braces. I am using a string value as an expression, and it displays the output there itself, between the HTML bold tag.
Angular Expressions Using String
Let us take this String expression example to the next level. You can assign values to the expressions, dynamically using an Angular directive. This technique will spare you from assigning static values and instead you can add different types of values according to your choice.
Note: I will not use the <html> and <head> tags repeatedly in my examples. Instead, I’ll add the expressions inside the <div> tag.
<div ng-app ng-init="name='Arun Banik'">
My name is <b> {{ name }} </b>
</div>The output of this example is the same as above. Except I have initialized the value using ng-init directive and later extended the variable name to the expression.
Angular Expressions Using Number
We can use numbers or numeric values in Angular expressions. Numeric values can have decimal values too.
<div ng-app
I have written <b> {{3000}} </b> plus articles.
</div>Output
I have written 3000 plus articles.
Additionally, you can use numbers in Angular expressions dynamically, using directives. In the below example I have declared a variable using ng-model directive, and later displaying the variable’s value in the expression. I have also added a filter “currency” with the variable.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>
<label>Enter the Price </label>
<input type="text" ng-model="bid" />
</p>
<p> {{bid | currency}} </p>
</div>
</body>
</html>Also, see this Demo
The filter is an amazing Angular feature in itself. The filter currency will allow you to enter only numbers. It seems like I have wasted precious time finding a solution using jQuery to write a script to Restrict users from entering only numbers. Well, there is no harm in learning new things.
Ternary Operator in AngularJS Expressions
In the beginning of this article, I have said, AngularJS expressions are an effort to bring JavaScript like functionalities to HTML. A Ternary Operator in Angular is an alternative to if, else and end if conditions in JavaScript. Angular introduced this feature in its version 1.1.5. It is a giant leap forward in making this framework, awesome.
You can use the ternary operator in expressions too. Believe it. Now, if you do not know what ternary operator is, then don’t skip the next paragraph.
A Ternary operator takes three expressions. If the condition is true, it will evaluate the first expression and it becomes the result. Else, it will evaluate the second expression and that becomes the result.
Syntax
Condition ? first_expression : second_expression
It has two operators, the ? (Question mark) and : (Colon), which separates the condition from the result.
Now, let us see an example.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app
ng-init="feb=[
{ day:1, available:25 },
{ day:2, available:11 },
{ day:3, available:41 },
{ day:4, waiting:5 },
{ day:5, available:31 }]">
<!-- LOOP.-->
<div ng-repeat="seats in feb">
<div>
{{ 'Day ' + seats.day }} # {{ seats.available > 0 ? 'Seats Available -' + seats.available :
'Waiting List -' + seats.waiting }}
</div>
</div>
</div>
</body>
</html>This demo replicates a simple reservation process, where it shows number of seats available for a particular month. Once, the ng-repeat is populated with the month’s figures, it checks if number of available seats is more than 0, then show the number of available seats else show the number of waiting list.
AngularJS One-time binding in Expressions
With version 1.3, Angular introduced a new feature, called the One-time binding, for the first time. If you use :: (no spaces) in an expression, it will create one-time bindings. What is the purpose of this feature? It is not very simple for a beginner to understand this concept immediately. However, I’ll explain it.
Like any other application, an Angular application too may have many elements, and we bind these elements with data. The Angular $watch() API keeps a watch on each bindings. It runs a loop through all the bindings, looking for data changes. These loops can consume valuable resources, if at any stage a view comprises of many data bindings.
When we declare an expression using ::, it tells Angular to ignore the watch once a value is assigned to it. Similarly, we can declare multiple expressions as one-time binding, which will reduce the loops ($digest() cycles), and the final result is improved performance.
Let us first create a normal binding. Here in this app, I want my users to enter the name of the city one after the other and click the submit button.
<div ng-app> Name a City <input type="text" ng-model="city" /> <button ng-click="cityname = city" ng-init="city">Submit</button> <p>Normal Binding: {{ cityname }} </p> </div>
For every click the expression {{ cityname }} will display a new city. Now, let’s add another expression with :: for one-time binding. Add this line in the app.
<p>One-time Binding: {{:: cityname}} </p>We have added another expression with one-time binding. Once the expression {{ :: cityname }} is defined, that is, we assign a value and it is displayed, Angular will free it from the bind. From this stage, any change in the Model, will not change the value in the expression. However, the normal binding will reflect the changes as usual.