AngularJs Expressions
In this blog, I’m explaining about the expressions in
angularjs and how to use it.
If you want to learn about angularjs first, then you can read my previous blogs:
AngularJs Introduction
ng-init and ng-repeat in AngularJs
If you want to learn about angularjs first, then you can read my previous blogs:
AngularJs Introduction
ng-init and ng-repeat in AngularJs
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.
Example 1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AngularJs
Application</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" >
<h2>My First Expression</h2>
<p> 10 + 10 = {{10 + 10}}</p>
</div>
</body>
</html>
Output
Example 2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>AngularJs
Application</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="student={firstname:'Steve', lastname:'Benson', rollno:'1001'};subjects=['English','Science','Maths'];marksObtained=[70,80,60]">
<h2> Student Details</h2>
<p>Roll No. : {{student.rollno}}</p>
<p>Name : {{student.firstname + " " + student.lastname}}</p>
<p>Subject : Marks Obtained
<ul>
<li>{{subjects[0]}} :
{{marksObtained[0]}}</li>
<li>{{subjects[1]}} :
{{marksObtained[1]}}</li>
<li>{{subjects[2]}} :
{{marksObtained[2]}}</li>
</ul>
</p>
<p>Total Marks : {{marksObtained[0] +
marksObtained[1] + marksObtained[2]}} </p>
<p>Percentage % : {{(marksObtained[0] +
marksObtained[1] + marksObtained[2])/300 * 100}}</p>
</div>
</body>
</html>
Output
Using numbers
<p>Total Marks : {{marksObtained[0] + marksObtained[1] +
marksObtained[2]}} </p>
<p>Percentage % :
{{(marksObtained[0] + marksObtained[1] + marksObtained[2])/300 * 100}}</p>
Using Strings
<p>Name :
{{student.firstname + " " + student.lastname}}</p>
Using Objects
<p>Roll No. :
{{student.rollno}}</p>
Using Array
<li>{{subjects[0]}} :
{{marksObtained[0]}}</li>
The above example shows the
use of all the above-mentioned expressions:
No comments:
Post a Comment