详解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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
javascript编写简易计算器
May 06 Javascript
vue一步步实现alert功能
Jul 05 Javascript
js保留两位小数方法总结
Jan 31 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 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
简单采集了yahoo的一些数据
2007/02/14 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
非常实用的php验证码类
2016/05/15 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
js post提交调用方法
2014/02/12 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python编写单元测试代码实例
2020/09/10 Python
python中pop()函数的语法与实例
2020/12/01 Python
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
外贸采购员岗位职责
2014/03/08 职场文书
机关单位动员会主持词
2014/03/20 职场文书
青春演讲稿范文
2014/05/08 职场文书
环卫个人总结
2015/03/03 职场文书
MySQL 开窗函数
2022/02/15 MySQL