详解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 jsFiddle JSBin在线调试器
Mar 14 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
使用Javascript简单计算器
Nov 17 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
基于JS实现table导出Excel并保留样式
May 19 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
MySQL授权问题总结
2007/05/06 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP无限分类(树形类)
2013/09/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vue实现弹幕功能
2019/10/25 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Python 基础教程之包和类的用法
2017/02/23 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python代码需要缩进吗
2020/07/01 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
后勤部长岗位职责
2013/12/14 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
创业培训计划书
2014/05/03 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书