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 相关文章推荐
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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输出缓存ob系列函数详解
2014/03/11 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
优质的学校老师推荐信
2013/10/28 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
高中地理教学反思
2016/02/19 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL