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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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
COM in PHP (winows only)
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
网络书店创业计划书
2014/02/07 职场文书
商场主管竞聘书
2014/03/31 职场文书
文明家庭事迹材料
2014/12/20 职场文书
商务信函英语问候语
2015/11/10 职场文书
教育教学工作反思
2016/02/24 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
python实现剪贴板的操作
2021/07/01 Python