详解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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 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/10/09 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
使用python Django做网页
2013/11/04 Python
Python松散正则表达式用法分析
2016/04/29 Python
利用python循环创建多个文件的方法
2018/10/25 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
办公室主任主任岗位责任制
2014/02/11 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python