详解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获取当前ip的代码
May 10 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
vue中对象数组去重的实现
Feb 06 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开发入门教程之面向对象
2006/12/05 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP 无限级分类
2017/05/04 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
JS获取当前时间戳方法解析
2020/08/29 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python2与python3共存问题的解决方法
2018/09/18 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
人力资源管理毕业生自荐信
2014/06/26 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS