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 相关文章推荐
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
express 项目分层实践详解
Dec 10 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获取MAC地址的函数代码
2011/09/11 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
基于php编程规范(详解)
2017/08/17 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
详解Python中的多线程编程
2015/04/09 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python flask搭建web应用教程
2019/11/19 Python
对python中return与yield的区别详解
2020/03/12 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
2014年学习雷锋活动总结
2014/03/01 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
产品销售计划书
2014/05/04 职场文书
个人承诺书怎么写
2014/05/24 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
力克胡哲观后感
2015/06/10 职场文书
Python 键盘事件详解
2021/11/11 Python