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 相关文章推荐
prototype class详解
Sep 07 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
详解小程序开发经验:多页面数据同步
May 18 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 echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
django框架如何集成celery进行开发
2017/05/24 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
企业指导教师评语
2014/04/28 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
财务年终工作总结大全
2019/06/20 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL
Android实现图片九宫格
2022/06/28 Java/Android