【AngularJS】—— 4 表达式
前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容。
在AngularJS中的表达式,与js中并不完全相同。
首先它的表达式要放在{{}}才能使用,其次相对于javascript中的表达式概念,它有以下几点不同:
1 作用域不同
在javascript中默认的作用于是window,但是在angularJs中就不同了。它使用$scope控制作用于。
2 允许未定义的值
在angularjs中,如果使用了未定义的表达式,也不会出现错误,直接返回空值。
3 过滤器
可以在表达式中使用 | 管道命令符,添加过滤器,与UNIX的命令行类似。
4 $符号
用以区别angular的方法与用户自定义的方法。
下面看一段小代码:
<!doctype html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctl">
name:<input ng-model="name" type="text">
<button ng-click="reset()">reset</button>
<br>
{{name}}
<br>
hello ! {{test}}
<br>
filter : {{name | uppercase}}
</div>
<script type="text/javascript">
function ctl($scope){
var str = "init";
$scope.name = str; $scope.reset = function(){
$scope.name = str;
}
}
</script>
</body>
</html>
通过reset触发reset方法,重置name变量的内容;
在表达式中,引用了未定义的test,但是并没有报错,直接默认显示为空;—— {{test}}
最后使用过滤器,将表达式中name的值转化成大写。—— {{name | uppercase}}
运行结果:
【AngularJS】—— 4 表达式的更多相关文章
- AngularJS的表达式、指令的学习(2)
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...
- AngularJS:表达式
ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS ...
- angularjs之表达式
一:angularjs表达式的解析 angularjs会在运行$digest循环中自动解析表达式,但有时手动解析表达式也是非常用用的. angularjs通过$parse这个内部服务来进行表达式的运算 ...
- Angularjs –– Expressions(表达式)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Angular的表达式 Angular的表达式和JavaScript代码很像,不过通常A ...
- AngularJs解决表达式闪烁的问题(ng-cloak)
举例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- AngularJS表达式
1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- AngularJS快速入门指南03:表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
- AngularJS 表达式 对象和数组
AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...
- angularJS表达式详解!
angularJS的表达式很像Javascript里的表达式:它可以包含文字,运算符和变量: angularJS 表达式: - 数字:{{100+100}} - 字符串:{{‘hello’+'angu ...
随机推荐
- SVN+Jenkins或CCNET环境部署图
目前来说比较常用的方案:
- SQLChop、SQLWall(Druid)、PHP Syntax Parser Analysis
catalog . introduction . sqlchop sourcecode analysis . SQLWall(Druid) . PHP Syntax Parser . SQL Pars ...
- 找女神要QQ号码
引言 我们组来了个美女程序员,我心里窃喜,哈哈这下机会来了.我在想怎么下手呢?好吧,还是从QQ号码开始,找到女神要到QQ号,哈哈,我真是个天才~~~ 是这样子滴 想法是美好的,现实是残酷的,找女神要Q ...
- UEditor上传图片到七牛云储存(c#)
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...
- Centos7更新firefox
1.用你本地的旧版 firefox,访问http://www.firefox.com.cn,下载Linux版本的Firefox. 2.进入存放下载文件(Firefox-latest-x86_64.ta ...
- [转]如何启用Ubuntu的休眠模式
大家都知道 Windows 有休眠模式,其实 Ubuntu 也有.休眠模式简单来说,就是可以在用户暂时离开时将内存中的所有内容都写入到硬盘当中,当用户下次开机时,就可以直接启动到上次保存的时间状态. ...
- PL/0编译器(java version) – Scanner.java
1: package compiler; 2: 3: import java.io.BufferedReader; 4: import java.io.FileNotFoundException; ...
- 总结jQuery选择器
基本选择器 1. id选择器(指定id元素) 2. class选择器(遍历css类元素) 3. element选择器(遍历html元素) 4. * 选择器(遍历所有元素) 5. 并列选择器$('p,d ...
- POJ1050To the Max(求最大子矩阵)
题目链接 题意:给出N*N的矩阵,求一个子矩阵使得子矩阵中元素和最大 分析: 必备知识:求一组数的最大连续和 int a[N]; ,maxn = -INF; ; i <= n; i++) { i ...
- 使用WebService和不使用WebService哪个速度更快哪个更安全