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 相关文章推荐
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
vue 封装面包屑组件教程
Nov 16 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
php微信开发之图片回复功能
2018/06/14 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
修改发贴的编辑功能
2007/03/07 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
python中wx模块的具体使用方法
2020/05/15 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
商场促销活动方案
2014/02/08 职场文书
公司财务部岗位职责
2015/04/14 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书