Expressions in Angularjs


Prev Tutorial Next Tutorial

Expressions

AngularJS Expressions used to binds application data to HTML. AngularJS expressions are written inside double curly braces such as : {{ expression }}. Angularjs Expressions behave same like to ng-bind directives. AngularJS expressions are pure JavaScript expressions and output of the data display where they are used.

Sample Example of AngularJS Expressions

Result

Calculator

First Number
Second Number

Sum: {{num1 + num2}}

Sub: {{num1 - num2}}

Mul: {{num1 * num2}}

Div: {{num1 / num2}}

Example

<!DOCTYPE html>
<html lang="en">
<div ng-app="" ng-init="num1=10; num2=1">
<h2>Calculator</h2>

First Number  <input type="number" ng-model="num1"><br>
Second Number <input type="number" ng-model="num2">

<p><b>Sum:</b> {{num1 + num2}}</p>
<p><b>Sub:</b> {{num1 - num2}}</p>
<p><b>Mul:</b> {{num1 * num2}}</p>
<p><b>Div:</b> {{num1 / num2}}</p>

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

Note: when you remove the ng-app directive, Html will display the expression as it is, without solving it.

Use Expression for String

Example

<div ng-app="" ng-init="firstName='Harry'; lastName='Porter';">

<p>Full Name: {{firstName + " " + lastName }}</p>

Use Expression for Array

Example

<div ng-app="" ng-init="array=[10,15,20,25,30]">
<p>Second Element is {{ array[1] }}</p>
</div>

Example using ng-bind for String

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="" ng-init="firstName='Harry'; lastName='Porter';">
<p>Full Name:  <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>
</body>
</html>

Prev Tutorial Next Tutorial

Google Advertisements
Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements