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 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
微信小程序canvas实现签名功能
Jan 19 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
PHP实现取得HTTP请求的原文
2014/08/18 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
js 编写规范
2010/03/03 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
javascript常见操作汇总
2014/09/03 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
require.js中的define函数详解
2017/07/10 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
Python常用算法学习基础教程
2017/04/13 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
求职简历自荐信范文
2013/10/21 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
Python之matplotlib绘制折线图
2022/04/13 Python