Home  >  Article  >  Web Front-end  >  AngularJS introductory tutorial - AngularJS expression_AngularJS

AngularJS introductory tutorial - AngularJS expression_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:05:051509browse

Expressions are used for application data binding to HTML. Expressions are written in double brackets like {{expression}}. The behavior in expressions is the same as the ng-bind directive. AngularJS application expressions are pure javascript expressions and output the data they are used in there.

AngularJS expression format: {{expression }}

AngularJS expressions can be strings, numbers, operators and variables

Number operations {{1 + 5}}

String concatenation {{ 'abc' + 'bcd' }}

Variable operations {{ firstName + " " + lastName }}, {{ quantity * cost }}

Object {{ person.lastName }}

Array{{ points[2] }}

AngularJS Example

1.Angularjs numbers

<div ng-app="" ng-init="quantity=2;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div> 

Output of the above example:

Total price: 10

Code comments:

ng-init="quantity=2;cost=5" //Equivalent to var quantity=2,cost=5;
in javascript The same functionality can be achieved using ng-bind

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: <span ng-bind="quantity * cost"></span></p>
//这里的ng-bind相当于指定了span的innerHTML
</div> 

2.Angularjs string

<div ng-app="" ng-init="firstName='John';lastName='Snow'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div> 

Output

Name: Jone Snow

3. AngularJS Object

<div ng-app="" ng-init="person={firstName:'John',lastName:'Snow'}">
<p>姓为 {{ person.lastName }}</p>
</div> 

Output

The last name is Snow

4.AngularJS Array

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>

Output

The third value is 19

The above is the introduction to AngularJS expressions in the AngularJS introductory tutorial introduced by the editor. I hope it will be helpful to everyone!

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