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验证表单第二部分
Nov 25 Javascript
JavaScript面向对象之体会[总结]
Nov 13 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
Vuex 入门教程
Jan 10 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
微信小程序选择图片控件
Jan 19 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之第三天
2006/10/09 PHP
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
js select常用操作控制代码
2010/03/16 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python实现的计数排序算法示例
2017/11/29 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
Ibatis如何调用存储过程
2015/05/15 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
支行行长岗位职责
2015/02/15 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python