首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 的同学。

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

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
地址栏上的一段语句，改变页面的风格。（教程）
Apr 02 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
JS 表单验证大全
Nov 23 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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
Django(9) Spring Bean(1) TextInputLayout(1) filter(1) reduce(2) openEuler(1) Selenium(1) Spring JPA(1) EditText(1) Tsmoothie(1)
You might like
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP脚本的10个技巧(8)
2006/10/09 PHP
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JS上传图片预览插件制作（兼容到IE6）
2016/08/07 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
学python爬虫能做什么
2020/07/29 Python
python如何将图片转换素描画
2020/09/08 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
介绍一下游标
2012/01/10 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
社区庆八一活动方案
2014/02/02 职场文书
世界遗产的导游词
2015/02/13 职场文书
永不妥协观后感
2015/06/10 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
立秋之描写立秋的作文（五年级）
2019/08/08 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书