详解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 相关文章推荐
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
js作用域及作用域链工作引擎
Jul 07 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中SimpleXML函数用法分析
2014/11/26 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
javascript中new关键字详解
2015/12/14 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
浅谈js闭包理解
2019/03/28 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
YUV转为jpg图像的实现
2019/12/09 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
招商经理岗位职责
2013/11/16 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL