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 相关文章推荐
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 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+dbfile开发小型留言本
2006/10/09 PHP
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python实现爬山算法的思路详解
2019/04/09 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
解决Python中回文数和质数的问题
2019/11/24 Python
python实现猜单词游戏
2020/05/22 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
校园活动宣传方案
2014/03/28 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
环卫工作个人总结
2015/03/04 职场文书
活动宣传稿范文
2015/07/23 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
python开发飞机大战游戏
2021/07/15 Python