AngularJS Expression

AngularJS expression is like JavaScript expression surrounded with braces - {{ expression }}. AngularJS evaluates the specified expression and binds the result data to HTML.

AngularJS expression can contain literals, operators and variables like JavaScript expression. For example, an expression {{2/2}} will produce the result 1 and will be bound to HTML.

Example: Expression
<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <h1>AngularJS Expression Demo:</h1>
    <div ng-app>
        2 + 2 = {{2 + 2}} <br />
        2 - 2 = {{2 - 2}} <br />
        2 * 2 = {{2 * 2}} <br />
        2 / 2 = {{2 / 2}}
    </div> 
</body>
</html>
Result:
2 + 2 = 4
2 - 2 = 0
2 * 2 = 4
2 / 2 = 1

AngularJS expression is like JavaScript code expression except for the following differences:

  1. AngularJS expression cannot contain conditions, loops, exceptions or regular expressions e.g. if-else, ternary, for loop, while loop etc.
  2. AngularJS expression cannot declare functions.
  3. AngularJS expression cannot contain comma or void.
  4. AngularJS expression cannot contain return keyword.

AngularJS expression contains literals of any data type.

Example: Expression
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <h1>AngularJS Expression Demo:</h1>
    <div ng-app>
        {{"Hello World"}}<br />
        {{100}}<br />
        {{true}}<br />
        {{10.2}}
    </div>
</body>
</html>
Result:
Hello World
100
True
10.2

AngularJS expression can contain arithmetic operators which will produce the result based on the type of operands, similar to JavaScript:

Example: Expression
<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app>
        {{"Hello" + " World"}}<br />
        {{100 + 100 }}<br />
        {{true + false}}<br />
        {{10.2 + 10.2}}<br />
    </div>
</body>
</html>
Result:
Hello World
200
1
20.4

AngularJS expression can contain variables declared via ng-init directive. The ng-init directive is used to declare AngularJS application variables of any data type.

Example: Expression
<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body >
    <div ng-app ng-init="greet='Hello World!'; amount= 10000;rateOfInterest = 10.5; duration=10;  myArr = [100, 200]; person = { firstName:'Steve', lastName :'Jobs'}">
        {{ (amount * rateOfInterest * duration)/100 }}<br />
        {{myArr[1]}} <br />
        {{person.firstName + " " + person.lastName}}
    </div>
</body>
</html>
Result:
10500
200
Steve Jobs