AngularJS表达式讲解及示例代码


Posted in Javascript onAugust 16, 2016

表达式用于应用程序数据绑定到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表达式讲解及示例代码

以上就是对AngularJS 表达式的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 #Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 #Javascript
AngularJS指令详解及示例代码
Aug 16 #Javascript
AngularJS教程之简单应用程序示例
Aug 16 #Javascript
AngularJS教程之MVC体系结构详解
Aug 16 #Javascript
超实用的javascript时间处理总结
Aug 16 #Javascript
AngularJS教程之环境设置
Aug 16 #Javascript
You might like
使用php4加速网络传输
2006/10/09 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
javascript测试题练习代码
2012/10/10 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
.net C#面试题
2012/08/28 面试题
美容院店长岗位职责
2014/04/08 职场文书
买房协议书
2014/04/11 职场文书
电子商务专业自荐信
2014/06/02 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
教师求职自荐信
2015/03/26 职场文书
民事上诉状范文
2015/05/22 职场文书
红色故事汇观后感
2015/06/18 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS