AngularJS入门教程之AngularJS表达式.docVIP

表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。AngularJS应用表达式是纯javascript表达式，并输出它们被使用的数据在那里。

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

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

数字运算{{1+5}}

字符串连接{{abc+bcd}}

变量运算{{firstName++lastName}}，{{quantity*cost}}

对象{{person.lastName}}

数组{{points[2]}}

AngularJS例子

1.Angularjs数字

lt;divng-app=ng-init=quantity=2;cost=5gt;

lt;pgt;总价：{{quantity*cost}}lt;/pgt;

lt;/divgt;

上例输出：

总价：10

代码注释：

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

使用ng-bind可以实现相同的功能

lt;divng-app=ng-init=quantity=1;cost=5gt;

lt;pgt;总价：lt;spanng-bind=quantity*costgt;lt;/spangt;lt;/pgt;

//这里的ng-bind相当于指定了span的innerHTML

lt;/divgt;

2.Angularjs字符串

lt;divng-app=ng-init=firstName=John;lastName=Snowgt;

lt;pgt;姓名：{{firstName++lastName}}lt;/pgt;

lt;/divgt;

输出

姓名：JoneSnow

3.AngularJS对象

lt;divng-app=ng-init=person={firstName:John,lastName:Snow}gt;

lt;pgt;姓为{{person.lastName}}lt;/pgt;

lt;/divgt;

输出

姓为Snow

4.AngularJS数组

lt;divng-app=ng-init=points=[1,15,19,2,40]gt;

lt;pgt;第三个值为{{points[2]}}lt;/pgt;

lt;/divgt;

输出

第三个值为19

以上所述是小编给大家介绍的AngularJS入门教程之AngularJS表达式的相关介绍，希望对大家有所帮助！