Sharing Knowledge is always advisable
AngularJS Expressions
AngularJS expressions can be written inside double braces:
{{ expression }}
.
AngularJS expressions can also be written inside a directive:
ng-bind="expression"
.
AngularJS will resolve the expression, and return the result exactly where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Result will be
My first expression : 10
f you remove the
ng-app
directive, HTML will display the expression as it is, without solving it:
<div ng-app="" ng-init="myCol='cyan'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
ng-init is used to initialize data.
Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.
Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
AngularJS expressions support filters, while JavaScript expressions do not.
AngularJS arrays are like JavaScript arrays:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Result will be
the third result is 19
AngularJs objects are same as javascript objects
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Result
The name is Doe
No comments:
Post a Comment