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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
JS实现瀑布流效果
Mar 07 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
谈谈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常用函数 推荐收藏保存
2010/02/21 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
python 等差数列末项计算方式
2020/05/03 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
招标承诺书
2014/08/30 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
招标授权委托书样本
2014/09/23 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
小学四年级作文之写景
2019/08/23 职场文书