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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
如何利用node转发请求详解
Sep 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
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php中Ctype函数用法详解
2014/12/09 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python的Tqdm模块的使用
2018/01/10 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
幼师求职信
2014/06/23 职场文书
2019入党申请书格式
2019/06/25 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers