AngularJS入门教程 - AngularJS表达式

AngularJS 表达式

AngularJS表达式格式 : {{expression }}

AngularJS表达式可以是字符串、数字、运算符和变量

1. 数字运算{{1 + 5}}
2. 字符串连接{{ 'abc' + 'bcd' }}
3. 变量运算 {{ firstName + " " + lastName }}， {{ quantity * cost }}
4. 对象{{ person.lastName }}
5. 数组{{ points[2] }}

AngularJS例子

1.Angularjs数字

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

<p>总价： {{ quantity * cost }}</p>

</div> 

上例输出：

总价：10

代码注释：

ng-init="quantity=2;cost=5" //相当于javascript里的var quantity=2,cost=5;

使用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字符串

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

<p>姓名： {{ firstName + " " + lastName }}</p>

</div> 

输出

姓名：Jone Snow

3. AngularJS对象

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

<p>姓为 {{ person.lastName }}</p>

</div> 

输出

姓为 Snow

4.AngularJS数组

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

<p>第三个值为 {{ points[2] }}</p>

</div> 

输出

第三个值为 19

原文地址：askH5