AngularJS Expressions

AngularJS UsageExpressionsBind data to HTML.

}}

AngularJS expressions are written inside double braces:{{ expression }}。

AngularJS expressions bind data to HTML, which isng-bindsimilar to how directives work.

AngularJS will "output" data at the position where the expression is written.

AngularJS expressionsare very similar toJavaScript expressions: They can contain literals, operators, and variables.

Example: {{ 5 + 5 }} or {{ firstName + " " + lastName }}

AngularJS Example

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.example.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html>

Try it Yourself »

AngularJS Numbers

AngularJS numbers are like JavaScript numbers:

AngularJS Example

<div ng-app="" ng-init="quantity=1;cost=5"> <p>Total price: {{ quantity * cost }}</p> </div>

Try it Yourself »

Same example using ng-bind:

AngularJS Example

<div ng-app="" ng-init="quantity=1;cost=5"> <p>Total price:<span ng-bind="quantity * cost"></span></p> </div>

Try it Yourself »

	Usingng-initis not very common. You will learn a better way to initialize data in the controllers chapter.

AngularJS Strings

AngularJS strings are like JavaScript strings:

AngularJS Example

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>Name: {{ firstName + " " + lastName }}</p> </div>

Try it Yourself »

Same example using ng-bind:

AngularJS Example

Try it Yourself »

AngularJS Objects

AngularJS objects are like JavaScript objects:

AngularJS Example

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>Last name is {{ person.lastName }}</p> </div>

Try it Yourself »

Same example using ng-bind:

AngularJS Example

Try it Yourself »

AngularJS Arrays

AngularJS arrays are like JavaScript arrays:

AngularJS Example

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third value is {{ points</p> </div>

Try it Yourself »

Same example using ng-bind:

AngularJS Example

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third value is<span ng-bind="points[2]"></span></p> </div>

Try it Yourself »