Expressions are used to bind application data to HTML. Expressions are written inside double curly braces such as in {{ expression}}. Expressions behave similar to ng-bind directives. AngularJS expressions are pure JavaScript expressions and output the data where they are used.
Using numbers
<p>Expense on Books : {{cost * quantity}} Rs</p>
Using String
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
Using Object
<p>Roll No: {{student.rollno}}</p>
Using Array
<p>Marks(Math): {{marks[3]}}</p>
Example
The following example shows the use of all the above-mentioned expressions:
testAngularJS.htm
<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
<p>Expense on Books : {{cost * quantity}} Rs</p>
<p>Roll No: {{student.rollno}}</p>
<p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Output
Open the file testAngularJS.htm in a web browser and see the result.
No comments:
Post a Comment