详解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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
Javascript动画效果(4)
Oct 11 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
微信小程序rich-text富文本用法实例分析
May 20 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 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 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
pytorch 共享参数的示例
2019/08/17 Python
python 字典的打印实现
2019/09/26 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
微观物理专业自荐信
2014/01/26 职场文书
毕业设计论文评语
2014/12/31 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
护士医德医风心得体会
2016/01/25 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL