THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Expressions


AngularJS uses expressions to bind data to HTML.


what is AngularJS

AngularJS expressions are written in double curly brackets: {{expression}} .

AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.

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

AngularJS expressions Much like JavaScript Expressions : They can contain text, operators, and variables.

Instance {{5 + 5}} or {{firstName + "" + lastName}}

Example

 

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>
Try it »

On the off chance that you expel the ng-app order, HTML will show the articulation for what it's worth, without explaining it:

Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div>
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>
Try it Yourself »

You can compose articulations wherever you like, AngularJS will essentially resolve the articulation and return the result.

Example: Let AngularJS change the estimation of CSS properties.

Change the shade of the information box underneath, by changing it's value:

Example

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

</div>
Try it Yourself »

AngularJS Numbers

AngularJS numbers are like JavaScript numbers:

Example

 

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ amount * cost }}</p>

</div>
Try it Yourself »

The same instance using ng-bind:

Example

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>
Try it Yourself »
Using ng-init is not very common. You will learn a better way to initialize the data in the controller chapter.

AngularJS Strings

AngularJS strings are like JavaScript strings:

Example

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>
Try it Yourself »

The same instance using ng-bind:

Example

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' + lastName"></span></p>

</div>
Try it Yourself »

AngularJS Objects

AngularJS objects are like JavaScript objects:

Example

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>
Try it Yourself »

The same instance using ng-bind:

Example

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>
Try it Yourself »

AngularJS Arrays

AngularJS arrays are like JavaScript arrays:

Example

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third value is {{ points[2] }}</p>

</div>
Try it Yourself »

The same instance using ng-bind:

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 »

Similar to JavaScript expressions, AngularJS expressions can contain letters, operators, and variables.

Unlike JavaScript expressions, AngularJS expressions can be written in HTML.

Unlike JavaScript expressions, AngularJS expressions do not support conditional evaluation, looping, and exceptions.

Unlike JavaScript expressions, AngularJS expressions support filters.