Articles → ANGULAR.JS → Expressions in angular.js

Expressions in angular.js

In this article, I will explain about expressions in angular.js. Like ng-bind, expressions are also used for binding application data to HTML controls.

Syntax

{{expression}}

Binding numbers

Consider the following code

<div ng-app>
	<p>Binding numbers {{5+11}}</p>
</div>

Here I am using expressions to bind numbers. When you execute this code in the browser you see the following

Picture showing the output of binding numbers using expression in angular.js

Click to Enlarge

Binding strings

You can bind strings either by using string constants or by using HTML controls.

<div ng-app>
	<p>Binding strings {{"My Name is Gyan"}}</p>
</div>

And the output will be

Picture showing the output of binding string using expression in angular.js

Click to Enlarge

For binding HTML control, you can use the following code

<div ng-app>
	<input type="text" ng-model="name" />
	<p> {{name}}</p>
</div>

Picture showing the output of binding value to HTML control using expression in angular.js

Click to Enlarge

If you compare the preceding 2 code snippets you can check that if we are passing a constant value in expressions then it should be passed in double quotes. Without quotes, expression is treated as application variable.

Posted By -	Karan Gupta

Posted On -	Wednesday, May 27, 2015

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250