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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
vue组件添加事件@click.native操作
Oct 30 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
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP中的正规表达式(二)
2006/10/09 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
详解PHP队列的实现
2019/03/14 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
vue 指定组件缓存实例详解
2018/04/01 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
python提取页面内url列表的方法
2015/05/25 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
Python整数对象实现原理详解
2019/07/01 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
财务部副经理岗位职责
2014/03/14 职场文书
事业单位聘任报告
2015/03/02 职场文书
在Django中使用MQTT的方法
2021/05/10 Python