【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 ...
随机推荐
- JDBC链接MySQL
首先,这里的JavaWeb使用JDBC的方法与Java的使用方法相似,但是有不同之处: 在Java中导入驱动包以后,直接用DriverManager.getConnection()获取连接对象, 而在 ...
- Swift&Node 使用Alamofire进行Post
这篇博客主要实现Swift客户端和NodeJS后台的Post.Get请求实现. 我是一个略有点讨厌重复使用工具的人,比如这些基本功能完全可以用OC和PHP等替代,但是没办法,现在知识更新的太快啦,Sw ...
- 谈谈JavaScript MVC模式
第一个是:没有使用mvc模式的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- Cookie对象
Cookie对象用于保存客户端浏览器请求的服务器页面,也可用于存放非敏感性的用户信息,信息保存的时间可以根据用户的需要进行设置.并非所有的浏览器都支持Cookie,并且数据信息是以文本的形式保存在客户 ...
- CentOs安装Scrapy出现error: Setup script exited with error: command ‘gcc’ failed with exit status 1错误解决方案
按照 http://www.1207.me/archives/209.html 的教程安装Scrapy出现了上述错误,但是本身机器已经有了gcc,所以应该是安装包的问题 百度又看到了同博客里的解决方案 ...
- POJ2187Beauty Contest(任意点的最远距离 + 凸包)
题目链接 题意:就是给N个点的坐标,然后求任意两个点距离的平方最大的值 枚举超时. 当明白了 最远距离的两个点一定在凸包上,一切就好办了.求出凸包,然后枚举 #include <iostream ...
- document.execCommand 常用的方法
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式: document.execCommand(sCommand[,交互方式, 动态参数]) , ...
- linux配置oracle11G监听及本地网络服务 及 数据库建库
配置监听及本地网络服务 在oracle用户的图形界面oracle用户中,新开启一个终端,输入命令netca 会弹出如下界面. 数据库建库 在oracle用户的图形界面oracle用户中,新开启一个终端 ...
- Java——表格
import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import javax.swing.JFrame; i ...
- JavaWeb学习笔记——Tomcat相关
Tomcat目录分析 1.bin 存放启动和关闭Tomcat的脚本文件 2.conf 存放Tomcat服务器的各种配置文件 3.lib 存放Tomcat服务器的支持jar包 4.logs 存放T ...