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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
理解JavaScript原型链
Oct 25 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 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
如何选购合适的收音机
2021/03/01 无线电
php 文章采集正则代码
2009/12/28 PHP
php 文件上传类代码
2011/08/06 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php中Snoopy类用法实例
2015/06/19 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
Node.js  事件循环详解及实例
2017/08/06 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
python对字典进行排序实例
2014/09/25 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
详解python播放音频的三种方法
2019/09/23 Python
Python类反射机制使用实例解析
2019/12/30 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2014年计生工作总结
2014/11/21 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python