详解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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
vue--vuex详解
Apr 15 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 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中批量替换文件名的实现代码
2011/07/20 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
推荐dojo学习笔记
2007/03/24 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
理解javascript闭包
2015/12/15 Javascript
javascript数组去重小结
2016/03/07 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
python集合用法实例分析
2015/05/30 Python
Python内建模块struct实例详解
2018/02/02 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
革命先烈的英雄事迹材料
2014/02/15 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
佛光寺导游词
2015/02/10 职场文书
大学四年个人总结
2015/03/03 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
中学音乐课教学反思
2016/02/18 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs