AngularJS基础学习笔记之表达式


Posted in Javascript onMay 10, 2015

AngularJS通过表达式将数据绑定到HTML。

AngularJS表达式

AngularJS表达式写在双大括号中:{{ 表达式语句 }}。

AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。

AngularJS会准确地将表达式“输出”为计算的结果。

AngularJS表达式与JavaScript表达式有许多相似之处,它们都包含文字、运算符和变量。例如{{ 5 + 5 }}和{{ firstName + " " + lastName }}

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

如果你去掉ng-app指令,表达式会被直接显示在页面上而不会被计算。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div>
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

AngularJS数字

AngularJS数字和JavaScript数字一样:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

同样,我们可以使用ng-bind指令达到相同的效果:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

Note 使用ng-init指令在AngularJS开发中非常普遍。在控制器一节中你将会看到更好的初始化数据的方法。

AngularJS字符串

AngularJS字符串与JavaScript字符串一样:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

同样,我们可以使用ng-bind指令达到相同的效果:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

AngularJS对象

AngularJS对象与JavaScript对象一样:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

同样,我们可以使用ng-bind指令达到相同的效果:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

AngularJS数组

AngularJS数组与JavaScript数组一样:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

同样,我们可以使用ng-bind指令达到相同的效果:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

AngularJS表达式与JavaScript表达式比较

与JavaScript表达式相同,AngularJS表达式也包含文字、运算符和变量。与JavaScript表达式不同的是,

AngularJS表达式可以写在HTML里面。
AngularJS表达式不支持条件和循环语句,而且没有exception语句。
AngularJS表达式支持过滤器。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/02 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
Vue多选列表组件深入详解
2021/03/02 Vue.js
Python XML RPC服务器端和客户端实例
2014/11/22 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
自学python用什么系统好
2020/06/23 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
软件测试面试题
2015/10/21 面试题
初中军训感想300字
2014/03/05 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
建筑施工安全责任书
2014/07/24 职场文书
农行心得体会
2014/09/02 职场文书
关于教师节的广播稿
2014/09/10 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
党内外群众意见范文
2015/06/02 职场文书