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 相关文章推荐
jquery实用代码片段集合
Aug 12 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
Angular中$compile源码分析
Jan 28 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 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
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
Yii配置文件用法详解
2014/12/04 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
PHP7 其他修改
2021/03/09 PHP
JavaScript触发器详解
2007/03/10 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
python模块之StringIO使用示例
2015/04/08 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
在django模板中实现超链接配置
2019/08/21 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
2013年大学生的自我鉴定
2013/10/24 职场文书
学校经典推荐信
2013/10/30 职场文书
学校师德承诺书
2014/05/23 职场文书
低碳环保演讲稿
2014/08/28 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
心理学培训心得体会
2016/01/22 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python