详解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控制swfObject应用介绍
Nov 29 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
原生js编写焦点图效果
Dec 08 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
python实现flappy bird游戏
2018/12/24 Python
python游戏地图最短路径求解
2019/01/16 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
python模块如何查看
2020/06/16 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
JDK安装目录下有哪些内容
2014/08/25 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
大学生社团活动总结
2014/04/26 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
教你部署vue项目到docker
2022/04/05 Vue.js