In AngularJS, expression notation {{}}
are used to bind data from model to HTML DOM elements and similar to ng-bind
directive. Expression allow you to use variable (primitive and object), operators and literals as well. Contains inside {{ expression }}
are executed in the context of the scope.
Syntax
<script> <p> {{ expression }} </p> </script>
<html> <head> <title>My first AngularJS Expression code</title> <script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script> </head> <body> <div ng-app=""> <h3> Expression: {{ 10 + 100 }} </h3> </div> </body> </html>See Live Example
<html> <head> <title>My first AngularJS Expression code</title> <script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script> </head> <body> <div ng-app=''> <div ng-init="num1=10;num2=20"> Expression Result: {{ num1 + num2 }} </br> <div ng-bind="num1 * num2"> </div> </div> </body> </html>See Live Example
<html> <head> <title>My first AngularJS Expression code</title> <script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script> </head> <body> <div ng-app=''> <div ng-init="name='Jimi Scott'"> Expression Result: {{ name }} </div> </div> </body> </html>See Live Example
<html> <head> <title>My first AngularJS Expression code</title> <script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script> </head> <body> <div ng-app=''> <div ng-init="customer={ name:'Jimi Scott', address:'12-13-283/A1', email:'[email protected]'}"> Expression Result: {{ customer.name + " " + customer.address + " " + customer.email }} </div> </div> </body> </html>See Live Example