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 相关文章推荐
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
JQuery for与each性能比较分析
May 14 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
node.js从数据库获取数据
May 08 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
vant自定义二级菜单操作
Nov 02 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
php5中类的学习
2008/03/28 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
python 制作简单的音乐播放器
2020/11/25 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
外语系毕业生自荐信范文
2013/12/16 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
老公爱的承诺书
2014/03/31 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
母亲节寄语大全
2015/02/27 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
大学推普周活动总结
2015/05/07 职场文书
现货白银电话营销话术
2015/05/29 职场文书
张丽莉观后感
2015/06/16 职场文书
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL