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实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
浅析node.js中close事件
Nov 26 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
javascript的函数作用域
2014/11/12 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
行政文秘岗位职责范本
2014/02/10 职场文书
管理标语大全
2014/06/24 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
python入门之算法学习
2021/04/22 Python
新手初学Java网络编程
2021/07/07 Java/Android
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript