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实现动态CSS换肤技术的脚本
Jun 29 Javascript
JS location几个方法小姐
Jul 09 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 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
PHPlet在Windows下的安装
2006/10/09 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
关于this和self的使用说明
2010/08/01 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
python简单获取数组元素个数的方法
2015/07/13 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python实现求最长回文子串长度
2018/01/22 Python
Python3 中文文件读写方法
2018/01/23 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
python批量下载抖音视频
2019/06/17 Python
int在python中的含义以及用法
2019/06/27 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
大学生找工作求职信
2014/07/09 职场文书
人大调研汇报材料
2014/08/14 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014年路政工作总结
2014/12/10 职场文书
党委工作总结2015
2015/04/27 职场文书
教师节班会开场白
2015/06/01 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python