Expressions of AngularJS basic study notes_AngularJS-JS Tutorial-php.cn

Expressions of AngularJS basic study notes_AngularJS

WBOY

Release： 2016-05-16 15:59:56

Original

1126 people have browsed it

AngularJS binds data to HTML via expressions.

AngularJS expression

AngularJS expressions are written in double braces: {{ expression statement }}.

AngularJS expressions bind data to HTML in the same way as the ng-bind directive.

AngularJS will accurately "output" the expression as the calculated result.

AngularJS expressions have many similarities with JavaScript expressions. They both 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>

Copy after login

If you remove the ng-app directive, 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>

Copy after login

AngularJS Numbers

AngularJS numbers are the same as JavaScript numbers:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Copy after login

Similarly, we can use the ng-bind 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>

Copy after login

Note Using the ng-init directive is very common in AngularJS development. In the Controllers section you'll see better ways to initialize data.

AngularJS String

AngularJS strings are the same as JavaScript strings:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

Copy after login

Similarly, we can use the ng-bind 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>

Copy after login

AngularJS Object

AngularJS objects are the same as JavaScript objects:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

Copy after login

Similarly, we can use the ng-bind 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>

Copy after login

AngularJS Array

AngularJS arrays are the same as JavaScript arrays:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Copy after login

Similarly, we can use the ng-bind 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>

Copy after login

Comparison of AngularJS expressions and JavaScript expressions

Like JavaScript expressions, AngularJS expressions also contain literals, operators, and variables. Unlike JavaScript expressions,

AngularJS expressions can be written in HTML.
AngularJS expressions do not support conditional and loop statements, and there are no exception statements.
AngularJS expressions support filters.

The above is the entire content of this article, I hope you all like it.