AngularJS 表达式详细讲解及实例代码


Posted in Javascript onJuly 26, 2016

AngularJS 表达式

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

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

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

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

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

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app>
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

</body>
</html>

运行结果:

我的第一个表达式: 10

AngularJS 数字

AngularJS 数字就像 JavaScript 数字:

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

</body>
</html>

运行结果:

总价:5

使用 ng-bind 的相同实例:

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

</body>
</html>

运行结果:

总价:5

注意:使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串:

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

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

</div>

</body>
</html>

运行结果:

姓名:John Doe

使用 ng-bind 的相同实例:

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

</body>
</html>

运行结果:

姓名:John Doe

AngularJS 对象

AngularJS 对象就像 JavaScript 对象:

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

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

</div>

</body>
</html>

运行结果:

姓名为  Doe

使用 ng-bind 的相同实例:

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>姓为 <span ng-bind="person.lastName"></span></p>

</div>

</body>
</html>

运行结果:

姓名为  Doe

AngularJS 数组

AngularJS 数组就像 JavaScript 数组:

 实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

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

</div>

</body>
</html>

运行结果:

第三个值为  19

使用 ng-bind 的相同实例:

 实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

<p>第三个值为 <span ng-bind="points[2]"></span></p>

</div>

</body>
</html>

运行结果:

第三个值为   19

AngularJS 表达式 与 JavaScript 表达式

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

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

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

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

以上就是对AngularJS 表达式资料的整理,后续继续补充,希望能帮助学习AngularJS 的同学。

Javascript 相关文章推荐
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
基于jQuery实现页面搜索功能
Mar 26 #Javascript
JS中的数组方法笔记整理
Jul 26 #Javascript
jQuery实现日期联动效果实例
Jul 26 #Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 #Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 #Javascript
JavaScript从0开始构思表情插件
Jul 26 #Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 #Javascript
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
java必学必会之static关键字
2015/12/03 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
python实现播放音频和录音功能示例代码
2018/12/30 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
基于python3实现倒叙字符串
2020/02/18 Python
django 外键创建注意事项说明
2020/05/20 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
自荐信写法介绍
2014/01/25 职场文书
生物制药自我鉴定
2014/01/25 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
食品安全责任书
2014/04/15 职场文书
信息员培训方案
2014/06/12 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
社区党员干部承诺书
2015/05/04 职场文书
怎样写家长意见
2015/06/04 职场文书
工作经历证明范本
2015/06/15 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL