详解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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
jquery 上下滚动广告
Jun 17 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
javascript Window及document对象详细整理
Jan 12 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 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 Mysql类 可以参考学习熟悉下
2009/06/21 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python中web框架的自定义创建
2019/09/08 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
出国留学自荐信
2013/10/25 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
法人委托书的范本格式
2014/09/11 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
委托收款证明
2015/06/23 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书