详解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 UI皮肤定制
Jul 27 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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
Laravel实现短信注册的示例代码
2018/05/29 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python使用sorted排序的方法小结
2017/07/28 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
薇姿法国官网:Vichy法国
2021/01/28 全球购物
Linux操作面试题
2015/02/11 面试题
关于保护环境的建议书
2014/05/13 职场文书
小学语文复习计划
2015/01/19 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
清洁员岗位职责
2015/02/15 职场文书
初中家长意见
2015/06/03 职场文书
美容院管理规章制度
2015/08/05 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js