详解AngularJS中的表达式使用


Posted in Javascript onJune 16, 2015

 表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里。
使用数字

<p>Expense on Books : {{cost * quantity}} Rs</p>

使用字符串

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

使用对象

<p>Roll No: {{student.rollno}}</p>

使用数组

<p>Marks(Math): {{marks[3]}}</p>

例子

下面的例子将展示上述所有表达式。
testAngularJS.html 文件代码如下:

<html>
<title>AngularJS Expressions</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'Mahesh',lastname:'Parashar',rollno:101};marks=[80,90,75,73,60]">
  <p>Hello {{student.firstname + " " + student.lastname}}!</p>  
  <p>Expense on Books : {{cost * quantity}} Rs</p>
  <p>Roll No: {{student.rollno}}</p>
  <p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html。看到结果如下:

详解AngularJS中的表达式使用

Javascript 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
vue如何判断dom的class
Apr 26 Javascript
js module大战
Apr 19 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
整理AngularJS中的一些常用指令
Jun 16 #Javascript
创建你的第一个AngularJS应用的方法
Jun 16 #Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 #Javascript
jQuery封装的tab选项卡插件分享
Jun 16 #Javascript
You might like
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python解析xml文件实例分析
2015/05/27 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
文明班集体申报材料
2014/05/23 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
校园元旦活动总结
2014/07/09 职场文书
人大代表选举标语
2014/10/07 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
家属联谊会致辞
2015/07/31 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
标准发言稿结尾
2019/07/18 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA