Expressions of AngularJS basic study notes
- 2020-06-07 04:03:01
- OfStack
AngularJS binds data to HTML through expressions.
AngularJS expression
The AngularJS expression is written in double braces: {{expression statement}}.
The AngularJS expression binds data to HTML in the same way as the ES14en-ES15en directive.
AngularJS will "output" the expression exactly as the result of the calculation.
The AngularJS expression has many similarities to the JavaScript expression in that they contain literals, operators, and variables. For example {{5 + 5}} and {{firstName + "" + lastName}}
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
If you remove the ES29en-ES30en instruction, the expression will be displayed directly on the page without being evaluated.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS digital
Same as AngularJS number and JavaScript number 1:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Similarly, we can use the ES44en-ES45en directive to achieve the same effect:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
Note's use of the ES50en-init directive is common in AngularJS development. You'll see better ways to initialize data in controller 1.
AngularJS string
AngularJS string is the same as JavaScript string 1:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Similarly, we can use the ES65en-ES66en directive to achieve the same effect:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
AngularJS object
AngularJS object and JavaScript object 1:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Similarly, we can use the ES79en-ES80en directive to achieve the same effect:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS array
AngularJS array is the same as JavaScript array 1:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Similarly, we can use the ES93en-ES94en directive to achieve the same effect:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
The AngularJS expression is compared to the JavaScript expression
Like the JavaScript expression, the AngularJS expression also contains literals, operators, and variables. Unlike the JavaScript expression,
AngularJS expressions can be written in HTML.
AngularJS expressions do not support conditional and circular statements, and there are no exception statements.
AngularJS expressions support filters.
This is the end of this article, I hope you enjoy it.