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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
react-intl实现React国际化多语言的方法
Sep 27 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使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PDO::_construct讲解
2019/01/27 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python assert语句的简单使用示例
2019/07/28 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
园林毕业生自我鉴定范文
2013/12/29 职场文书
个人借款协议书范本
2014/11/17 职场文书
教师党员自我评价2015
2015/03/04 职场文书
教师创先争优承诺书
2015/04/27 职场文书
歼十出击观后感
2015/06/11 职场文书
团干部培训班心得体会
2016/01/06 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers