Expressions in AngularJS is represented using double curly braces-{{ }}. Expressions are used to bind the data to the HTML in the same way as the ng-bind directive of angular.
Expressions using-
1.numbers:-
syntax- <p>Price of movie tickets : {{price * Noofpersons}} Rs</p>
For example-
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="price=150; Noofpersons =2">
<p>Price of movie tickets: {{ price * Noofpersons }} Rs</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
2.strings:-
syntax-<p>We are going for {{lunch + ' ' + and + ’ ’ + movie}}</p>
For example-
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="lunch='lunch';and='and;movie=movie>
<p>We are going for {{lunch + ' ' + and + + movie}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
3.object:-
syntax-<p>Menu: {{menu.nonveg}}</p>
For example:-
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init=menu={veg:Paneer,nonveg:Chicken}>
<p>The menu contains {{ menu.veg }} {{ menu.nonveg }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
4.array:-
syntax-<p>Some good scooties are {{ scooty[0] }}</p>
For example:-
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init=scooty=[Activa,Maestro,Pleasure,Vespa]>
<p>Some good scooties are {{ scooty[0] }}, {{ scooty[1] }}, {{ scooty[2] }}, {{ scooty[3] }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
Angular expressions are much like as javascript expressions as they also contain literals,operators and variables. But AngularJS expressions supports filters while javascript expressions don’t.
0 Comment(s)