Home >Web Front-end >JS Tutorial >Expressions of AngularJS basic study notes_AngularJS

Expressions of AngularJS basic study notes_AngularJS

WBOYOriginal: 2016-05-16 15:59:561101browse

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of jQuery’s methods for achieving smooth jump effects of anchor points within the page_jqueryNext article：Summary of jQuery’s methods for achieving smooth jump effects of anchor points within the page_jquery

See more

Expressions of AngularJS basic study notes_AngularJS

Related articles