AngularJS expression
May 08, 2021 AngularJS
Table of contents
AngularJS expression
AngularJS uses expressions to bind data to HTML.
AngularJS expression
The AngularJS expression is written in double braces: .
The AngularJS expression binds data to HTML, which is similar to the ng-bind instruction.
AngularJS "outputs" the data where the expression is written.
AngularJS expressions are much like JavaScript expressions: they can contain text, operators, and variables.
Examples .
AngularJS numbers
AngularJS data is like JavaScript numbers:
AngularJS instance
<p>总价： {{ quantity * cost }}</p>
</div>
Try it out . . .
Use the same instance of ng-bind:
AngularJS instance
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div>
Try it out . . .
|
Using ng-init is not very common. You'll learn a better way to initialize your data in the Controller chapter. |
|---|
AngularJS string
The AngularJS string is like a JavaScript string:
AngularJS instance
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
Try it out . . .
Use the same instance of ng-bind:
AngularJS instance
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Try it out . . .
AngularJS object
The AngularJS object is like a JavaScript object:
AngularJS instance
<p>姓为 {{ person.lastName }}</p>
</div>
Try it out . . .
Use the same instance of ng-bind:
AngularJS instance
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>
Try it out . . .
AngularJS array
The AngularJS array is like a JavaScript array:
AngularJS instance
<p>第三个值为 {{ points[2] }}</p>
</div>
Try it out . . .
Use the same instance of ng-bind:
AngularJS instance
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>
Try it out . . .