详解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 validate使用攻略 第四步
Jul 01 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
微信小程序合法域名配置方法
May 06 Javascript
vue设置默认首页的操作
Aug 12 Javascript
JS setTimeout与setInterval的区别
Apr 20 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/09/20 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python 初始化多维数组代码
2008/09/06 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python实现飞船大战
2020/04/24 Python
Python自动登录QQ的实现示例
2020/08/28 Python
python实现磁盘日志清理的示例
2020/11/05 Python
人事专员的岗位职责
2014/03/01 职场文书
2019广播稿怎么写
2019/04/17 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python