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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
JavaScript中的闭包
Feb 24 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
详谈PHP编码转换问题
2015/07/28 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
AngularJS实现注册表单验证功能
2017/10/16 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python用post访问restful服务接口的方法
2018/12/07 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
大学生的创业计划书就该这么写
2014/01/30 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
团日活动总结范文
2014/04/25 职场文书