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 相关文章推荐
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
详解在React-Native中持久化redux数据
May 22 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
JavaScript中跨域问题的深入理解
Mar 04 Javascript
angular异步验证器防抖实例详解
Mar 31 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
javascript replace方法与正则表达式
2008/02/19 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python实现感知机模型的示例
2020/09/30 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python热力图实现简单方法
2021/01/29 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
学期自我鉴定范文
2013/10/01 职场文书
学生实习推荐信范文
2013/11/26 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
教师党员自我评价2015
2015/03/04 职场文书
惊天动地观后感
2015/06/10 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书