详解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中“+=”的应用
Feb 02 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
innerText 使用示例
Jan 23 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
微信小程序自定义弹出层效果
May 26 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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python简单实现enum功能的方法
2016/04/25 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
五好关工委申报材料
2014/05/31 职场文书
绿色环保倡议书
2015/04/28 职场文书
开学随笔
2015/08/15 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
带你了解Java中的ForkJoin
2022/04/28 Java/Android