AngularJS Expressions
AngularJS binds data to HTML using Expressions.
AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS expressions binds data to HTML the same way as the ng-bind
directive.
AngularJS will "output" data exactly where the expression is written.
AngularJS expressions are much like JavaScript
expressions: They can contain literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
If you remove the ng-app directive, HTML will display the
expression as it is, without solving it:
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS Numbers
AngularJS numbers are like JavaScript numbers:
AngularJS Example
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Same example using ng-bind:
AngularJS Example
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
 |
Using ng-init is not very common. You will learn a better way to initialize data
in the chapter about controllers. |
AngularJS Strings
AngularJS strings are like JavaScript strings:
AngularJS Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Same example using ng-bind:
AngularJS Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
AngularJS Objects
AngularJS objects are like JavaScript objects:
AngularJS Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Same example using ng-bind:
AngularJS Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS Arrays
AngularJS arrays are like JavaScript arrays:
AngularJS Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The points are {{ points[2] }}</p>
</div>
Same example using ng-bind:
AngularJS Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The points are <span ng-bind="points[2]"></span></p>
</div>
Color Picker
