AngularJS 表达式

AngularJS使用表达式把数据绑定到HTML。

AngularJS表达式写在双大括号内:{{expression}}。

AngularJS表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙。

AngularJS将在表达式书写的位置“输出”数据。

AngularJS表达式很像JavaScript表达式:它们可以包含文字、运算符和变量。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wiki(wiki.imooc.com)</title>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app>
<p>表达式: {{ 5 + 5 }}</p>
</div>

</body>
</html>

运行案例

AngularJS数字

AngularJS数字就像JavaScript数字。

实例:

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

运行案例

使用ng-bind的相同实例:

<div ng-app="" ng-init="quantity=1;cost=5">
 <p>总价: <span ng-bind="quantity * cost"></span></p>
</div>

运行案例

AngularJS字符串

AngularJS字符串字符串就像JavaScript字符串。

实例:

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

运行案例

使用ng-bind的相同实例:

<div ng-app="" ng-init="firstName='Sherlock';lastName='Holmes'">
 <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

运行案例

AngularJS对象

AngularJS对象就像JavaScript对象。

实例:

<div ng-app="" ng-init="person={Sherlock:'Sherlock',lastName:'Holmes'}">
 <p>姓: {{ person.lastName }}</p>
</div>

运行案例

使用ng-bind的相同实例:

<div ng-app="" ng-init="person={firstName:'Sherlock',lastName:'Holmes'}">
 <p>姓: <span ng-bind="person.lastName"></span></p>
</div>

运行案例

AngularJS数组

AngularJS数组就像JavaScript数组。

实例:

<div ng-app="" ng-init="points=[2,3,5,7,11]">
 <p>第三个值为 {{ points[2] }}</p>
</div>

运行案例

使用ng-bind的相同实例:

<div ng-app="" ng-init="points=[2,3,5,7,11]">
 <p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>

运行案例

与JavaScript表达式相比较

  1. 类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

  2. 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

  3. 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。

  4. 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。


本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信