Google News
logo
AngularJS Expressions
The AngularJS expressions are used to bind application data to HTML. You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result. Expressions are written inside double braces like {{ expression}}, expressions behaves in same way as ng-bind directives. 

A simple example of an expression is {{10+ 8}}.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Expression</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app>
 
  <h4>My Expression value is : {{ 10 + 8 }}</h4>
 
</div>
 
</body>
</html>
Output :

The following expressions and examples :

AngularJS Numbers

AngularJS Strings

AngularJS Objects

AngularJS Arrays

AngularJS Numbers
AngularJS numbers are like JavaScript numbers :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Expression Numbers</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="" ng-init="quantity=3;cost=9">
 
  <h4>Total Product Cost : {{ quantity * cost }}</h4>
 
</div>
 
</body>
</html>
Output :
AngularJS Strings
AngularJS strings are like JavaScript strings :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Expression Strings</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="" ng-init="firstName='Free Time ';lastName='Learning'">
 
  <p>The website name is:  <b>{{ firstName + " " + lastName }}.</b></p>
 
</div>
 
</body>
</html>
Output :
AngularJS Objects
AngularJS objects are like JavaScript objects :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Expression Objects</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="" ng-init="person={id_no:'FTL-0001',card_no:'FTL-0002'}">
 
  <p>My Id Number is : <b>{{ person.id_no }}.</b></p>
 
</div>
 
</body>
</html>
Output :
AngularJS Arrays
AngularJS arrays are like JavaScript arrays :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Expression Arrays</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="" ng-init="numbers=[1,9,18,27,36]">
 
  <p>The final result is : <b>{{ numbers[4] }}.</b></p>
 
</div>
 
</body>
</html>
Output :