AngularJS基础学习笔记之表达式


Posted in Javascript onMay 10, 2015

AngularJS通过表达式将数据绑定到HTML。

AngularJS表达式

AngularJS表达式写在双大括号中:{{ 表达式语句 }}。

AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。

AngularJS会准确地将表达式“输出”为计算的结果。

AngularJS表达式与JavaScript表达式有许多相似之处,它们都包含文字、运算符和变量。例如{{ 5 + 5 }}和{{ firstName + " " + lastName }}

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

如果你去掉ng-app指令,表达式会被直接显示在页面上而不会被计算。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div>
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

AngularJS数字

AngularJS数字和JavaScript数字一样:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

同样,我们可以使用ng-bind指令达到相同的效果:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

Note 使用ng-init指令在AngularJS开发中非常普遍。在控制器一节中你将会看到更好的初始化数据的方法。

AngularJS字符串

AngularJS字符串与JavaScript字符串一样:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

同样,我们可以使用ng-bind指令达到相同的效果:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

AngularJS对象

AngularJS对象与JavaScript对象一样:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

同样,我们可以使用ng-bind指令达到相同的效果:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

AngularJS数组

AngularJS数组与JavaScript数组一样:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

同样,我们可以使用ng-bind指令达到相同的效果:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

AngularJS表达式与JavaScript表达式比较

与JavaScript表达式相同,AngularJS表达式也包含文字、运算符和变量。与JavaScript表达式不同的是,

AngularJS表达式可以写在HTML里面。
AngularJS表达式不支持条件和循环语句,而且没有exception语句。
AngularJS表达式支持过滤器。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
You might like
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
JavaScript 创建对象
2009/07/17 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
pandas如何处理缺失值
2019/07/31 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python如何在bool函数中取值
2020/09/21 Python
趣味游戏活动方案
2014/02/07 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
房产继承公证书
2014/04/09 职场文书
工会趣味活动方案
2014/08/18 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
爱心募捐感谢信
2015/01/22 职场文书
步步惊心观后感
2015/06/12 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Python Matplotlib绘制动画的代码详解
2022/05/30 Python