Expressions in Angularjs

Advertisements
AngularJS Controller AngularJS MVC Architecture

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>
AngularJS Controller AngularJS MVC Architecture
Google Advertisment

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

For Projects 9999595223

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements