详解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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
JS与框架页的操作代码
Jan 17 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
react+antd 递归实现树状目录操作
Nov 02 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
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
Python装饰器用法实例分析
2019/01/14 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
浅析Python 序列化与反序列化
2020/08/05 Python
详解Python 函数参数的拆解
2020/09/02 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
维修工先进事迹
2014/05/29 职场文书
大学生就业自荐书
2014/06/16 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
先进人物事迹材料
2014/12/29 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
以下牛机,你有几个
2022/04/05 无线电