AngularJS入门教程之AngularJS表达式
更新时间：2016年04月18日 11:55:21 投稿：mrr
AngularJS应用表达式是纯javascript表达式，并输出它们被使用的数据在那里。本文给大家介绍AngularJS入门教程之AngularJS表达式，对angularjs表达式相关知识感兴趣的朋友一起学习吧
表达式用于应用程序数据绑定到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表达式的相关介绍，希望对大家有所帮助！
相关文章
这篇文章主要给大家介绍了关于angular引入ng-zorro的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了Angular 2+ 的表单（一）之模板驱动型表单,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-04-04
本篇文章主要介绍了angular实现IM聊天图片发送实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本篇文章主要介绍了浅谈AngularJs 双向绑定原理(数据绑定机制)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了详解AngularJS中的作用域,是AngularJS学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了AngularJS中使用three.js的实例详解，我将之前自己做的demo放到了angularJS的一个component中，其实一开始是没有准备用框架的但是后面发现需要进行的双向绑定越来越多，后期表单数据的变化量也很大，最后还是选择用NG来做这些事情2017-07-07
简单谈谈require模块化jquery和angular的问题
下面小编就为大家带来一篇简单谈谈require模块化jquery和angular的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Angularjs过滤器实现动态搜索与排序功能,涉及AngularJS过滤器相关搜索、查询、排序操作技巧,需要的朋友可以参考下2017-12-12
Angular2使用Guard和Resolve进行验证和权限控制
本篇文章主要介绍了Angular2使用Guard和Resolve进行验证和权限控制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下2016-03-03
最新评论