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模仿msgbox提示效果代码
Jun 10 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
利用javaScript处理常用事件详解
Apr 14 Javascript
基于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
isset和empty的区别
2007/01/15 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
再论Javascript的类继承
2011/03/05 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
js获取url传值的方法
2015/12/18 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
学生学习总结的自我评价
2013/10/22 职场文书
大门门卫岗位职责
2013/11/30 职场文书
海南地接欢迎词
2014/01/14 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
应届生自荐信范文
2014/02/21 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
硕士学位论文评语
2014/12/31 职场文书
简爱电影观后感
2015/06/10 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
SQL Server删除表中的重复数据
2022/05/25 SQL Server
MySQL自定义函数及触发器
2022/08/05 MySQL