AngularJS表达式

概览

AngularJS使用表达式即:{{ expression }} 将数据绑定到HTML上显示。跟ng-bind之类类似。

类似于js表达式:包含文字{{"hello"+"world" }},运算符{{2+4}}和变量{{firstName+" "+lastName}},对象和数组。

第一、运算案例:

<div ng-app="" ng-init="a=5;b=6">

<div>a+b的值是:{{a+b}}</div>

</div>

ng-bind指令实例:

<div ng-app="" ng-init="a=5;b=6">

<div>a+b的值是:<span ng-bind="a+b"></span></div>

</div>

输出结果为:a+b的值是:11

第二、字符串案例:

<div ng-app init="name='mary';age=21">

<div>姓名:{{name+"  年龄:"+age}}</div>

</div>

ng-bind指令实例

<div ng-app="" ng-init="name='mary';age=21">

<div>姓名:<span ng-bind="name+' 年龄:'+age"></div>

</div>

输出结果为:姓名:mary 年龄:21

第三、对象案例

<div ng-app="" ng-init="animal={name:'cat',eat:'fish'}">

<div>动物名是:{{animal.name}}</div>

</div>

ng-bind指令实例

<div ng-app="" ng-init="animal={name:'cat',eat:'fish'}">

<div>动物名是:<span ng-bind="animal.name"></span></div>

</div>

输出结果是:动物名是:猫

第四、数组实例

<div ng-app="" ng-init="num=[2,5,8,9,22]">

<div>第四个值是:{{num[3]}}</div>

</div>

ng-bind指令实例

<div ng-app="" ng-init="num=[2,5,8,9,22]">

<div>第四个值是:<span ng-bind="num[3]"></span></div>

</div>

输出结果是:第四个值是:9

备注:

AngularJS表达式和JavaScript表达式的比较

1.两者表达式都可以包含字母。操作符和变量。

2.AngularJS表达式可以写在HTML中,JavaScript表达式则是脚本中

3.AngularJS表达式不支持条件判断、循环和异常,JavaScript表达式则支持

4.AngularJS表达式支持过滤器。

摘录自runoob.com。旨在通过自己的语言加深对AngularJS的学习、理解和记忆。

原文地址:https://www.cnblogs.com/professional-NET/p/4985158.html