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 相关文章推荐
表单验证的完整应用案例探讨
Mar 29 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
原生JS实现分页
Apr 19 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
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
基于python plotly交互式图表大全
2019/12/07 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
python实现人机五子棋
2020/03/25 Python
Python3.9新特性详解
2020/10/10 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
党在我心中演讲稿
2014/09/02 职场文书
大二学生自我检讨书
2014/10/23 职场文书
地震慰问信
2015/02/14 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
运动员加油词
2015/07/18 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL