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.write()
Apr 15 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
理解jQuery stop()方法
Nov 21 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 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-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
Python深入学习之内存管理
2014/08/31 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python读取xlsx的方法
2018/12/25 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
老师对学生的评语
2014/04/18 职场文书
优秀护士先进事迹
2014/05/08 职场文书
个人综合鉴定材料
2014/05/23 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
女方离婚起诉书
2015/05/18 职场文书
经销商会议开幕词
2016/03/04 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书