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增删元素的代码
Feb 14 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
使用javascript做在线算法编程
May 25 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 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
php设计模式 Strategy(策略模式)
2011/06/26 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php查询操作实现投票功能
2016/05/09 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
javascript天然的迭代器
2010/10/29 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python二元表达式用法
2019/12/04 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
一些网络技术方面的面试题
2014/05/01 面试题
毕业生实习鉴定
2013/12/11 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
元旦促销方案
2014/03/15 职场文书
警示教育活动总结
2014/05/05 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技