AngularJS入门教程之AngularJS表达式


Posted in Javascript onApril 18, 2016

表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里。

AngularJS表达式格式 : {{expression }}

AngularJS表达式可以是字符串、数字、运算符和变量

数字运算{{1 + 5}}

字符串连接{{ 'abc' + 'bcd' }}

变量运算 {{ firstName + " " + lastName }}, {{ quantity * cost }}

对象{{ person.lastName }}

数组{{ points[2] }}

AngularJS例子

1.Angularjs数字

<div ng-app="" ng-init="quantity=2;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>

上例输出:

总价:10

代码注释:

ng-init="quantity=2;cost=5" //相当于javascript里的var quantity=2,cost=5;
使用ng-bind可以实现相同的功能

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: <span ng-bind="quantity * cost"></span></p>
//这里的ng-bind相当于指定了span的innerHTML
</div>

2.Angularjs字符串

<div ng-app="" ng-init="firstName='John';lastName='Snow'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>

输出

姓名:Jone Snow

3. AngularJS对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Snow'}">
<p>姓为 {{ person.lastName }}</p>
</div>

输出

姓为 Snow

4.AngularJS数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>

输出

第三个值为 19

以上所述是小编给大家介绍的AngularJS入门教程之AngularJS表达式的相关介绍,希望对大家有所帮助!

Javascript 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
js canvas实现擦除动画
Jul 16 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 #Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 #Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 #Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 #Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 #Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 #Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 #Javascript
You might like
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
详解Python中的Descriptor描述符类
2016/06/14 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Php多进程实现代码
2018/05/07 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
keras.layer.input()用法说明
2020/06/16 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
python爬取youtube视频的示例代码
2021/03/03 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
生产班组长岗位职责
2014/01/05 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
数据库连接池
2021/04/06 MySQL
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis