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的6个Tab选项卡插件
Sep 03 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
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
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python全排列操作实例分析
2018/07/24 Python
python实现连连看游戏
2020/02/14 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
三维科技面试题
2013/07/27 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
销售会计岗位职责
2014/03/15 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python