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动态添加option示例
Dec 30 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
详解Puppeteer 入门教程
May 09 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 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索引问题
2008/06/07 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
python环境下安装opencv库的方法
2020/03/05 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python os库常用操作代码汇总
2020/11/03 Python
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
十一个高级MySql面试题
2014/10/06 面试题
银行学习十八大感想
2014/01/11 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
竞选部长演讲稿
2014/04/26 职场文书
工作作风承诺书
2014/08/30 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫