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 相关文章推荐
用js实现小球的自由移动代码
Apr 22 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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写的小东西
2006/12/06 PHP
PHP 表单提交给自己
2008/07/24 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
Python连接数据库学习之DB-API详解
2017/02/07 Python
python3实现逐字输出的方法
2019/01/23 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
公务员培训自我鉴定
2014/02/01 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2014年租房协议书范本
2014/10/30 职场文书
团拜会主持词
2015/07/04 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
2016年十一促销广告语
2016/01/28 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫