AngularJS 基础教程二：
5.过滤器
过滤器的主要功能是格式化数据 可以使用Angular提供的过滤器，也可以自定义过滤器 Angular过滤器：
currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制长度)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。
例：{{ nowdate | date:'yyyy-mm-dd hh:mm:ss'}}
过滤器的3种调用方式：
单个过滤器 { 100.00 | currency } $100.00
多个过滤器 { 100.00 | currency | number:1 }$100.0
带参数的过滤器 { 100.00 | currency:'￥' }
①filter过滤器
（1）filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索
<ul class="messages">
<li ng-repeat="item in messages | filter:{content:123}">
{{item.content}}
</li>
</ul>
（2）filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索
<ul class="messages">
<li ng-repeat="item in messages | filter:{content:123}">
{{item.content}}
</li>
</ul>
（3）过滤器函数参数
<ul class="numbers">
<li ng-repeat="item in numbers | filter:1:comparator">
{{ item }}
</li>
</ul>
// js代码
$scope.comparator = function (source,target) {
return source > target;
};
（4）自定义过滤器 Module.filter（）
angular.module('MyAppFilters', []).filter('checkmark', function() {
return function(input) { //过滤器函数 接受一个参数 为需要过滤的数据
return input ? ‘\u2713’ : ‘\u2718’; //返回过滤后的数据格式
};
});
{{ name | checkmark }}
5.作用域
AngularJS对象提供的controller方法可以创建控制器。 创建控制器后，需要区别控制器所支持的视图。 通过ng-controller指令可以指定控制器支持的视图。 控制器的参数包括一个工厂函数，该函数接受一个参数$scope，表明该控制器对$scope服务的依赖。这时控制器可以通过$scope对应的作用域与视图建立联系。 $scope作用域不但定义了控制器和视图之间的关系，而且对许多重要的AngularJS特性如：数据绑定，提供了运转机制。 控制器通过在控制器函数中定义数据和行为使用作用域。
$scope对象实际上是一个作用域对象，作用域能存储数据模型，为表达式提供上下文环境，监听表达式的变化，传播事件。是视图和控制器之间的重要桥梁。 作用域的特点： 为表达式提供执行环境，一个表达式必须在拥有该表示式属性的作用域中执行。作用域通过提供$scope对象，使所有的表达式都拥有对应的执行环境，也就是执行的上下文。 提供了一个$watch方法监听数据模型的变化，之所以能使用ng-model指令实现数据的双向绑定，就是隐式的调用该方法进行数据模型的监听，只要有一端发生变化，另外绑定的一端自动进行数据同步。 提供了一个$apply方法，为各种类型的数据模型改变提供支撑，将它们引入到Angular可控制的范围中。这个可控制的范围最典型的就是控制器，例如：通过ng-click指令，执行控制器中的代码。
6.$watch方法，$digest方法，$apply方法三者之间的关系
$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality); 每个参数的说明如下： watchExpression（必须）：监听的对象，它可以是一个string，将被计算为表达式 ,或函数如function(){return $scope.name}。 listener:当watchExpression（监听对象）变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用) objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。
$digest：Angular会运行一个函数$digest来检查scope模型中的数据是否发生了变化。 在$digest循环中，watchers会被触发。当一个watcher被触发时，AngularJS会检测它所监听的scope模型，如果监听对象发生了变化那么关联到该watcher的回调函数就会被调用。 这种方法叫做脏检查。 在angular程序初始化时，会将绑定对象的属性添加为监听对象（watcher），也就是说一个$scope对象绑定了N个属性，就会添加N个watcher。 angular什么时候去脏检查呢？angular所定义的方法中都会触发$digest事件，比如：controller初始化的时候，所有以ng-开头的指令执行后，都会触发脏检查 用户与视图发生交互行为以后会触发脏检查。 调用$digest方法： $scope.$digest();
$apply:AngularJS并不直接调用$digest()，而是调用$scope.$apply()，$apply方法就是将$digest方法包装了一层，会调用$rootScope.$digest()。因此，一轮$digest循环在$rootScope开始，随后会访问到所有的children scope中的watchers。 $apply()方法接受一个可选参数，可以是string，string将被看作表达式并计算结果，也可以是函数。 当接受function作为参数，会执行该function并且触发一轮$digest循环。 不接受任何参数，触发一轮$digest循环会，检查该$scope里的所有监听的属性。 如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()来通知AngularJS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行程安排</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<script src="../script/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller("myController", function ($scope) {
$scope.message = '原来的信息';
$scope.getMessage = function(){
setTimeout(function(){
//message刚开始不是监听对象，对它加上$scope.$apply后才可以监听
$scope.$apply(function () {
$scope.message = '两秒后更新';
alert('message'+$scope.message);
});
//$scope.$apply();
},2000)
}
$scope.getMessage();
})
</script>
</head>
<body ng-app="myapp" ng-controller="myController">
{{message}}
</body>
</html>
AngularJS 基础教程二：的更多相关文章
- Angularjs基础教程
Angularjs-基础教程 一些angualr的基础概念,适合入门. 1.下载 推荐 bower 或 npm 安装. bower install angular bower install angu ...
- 你的第一个AngularJS应用--教程二：基架、建立和測试的工具
介绍 有非常多可用的工具能够帮助你开发AngularJS 应用,那些非常复杂的框架不在我的讨论范围之中,这也是我開始这系列教程的原因. 在第一部分,我们掌握了AngularJS框架的基本结构,开发了第 ...
- Angularjs基础(十二)
ng-model-options 描述:规定如何更新模型 实例: 在失去焦点时绑定输入框的值scope 变量中. <div ng-app="myApp" ng-control ...
- MySQL8.0数据库基础教程(二)-理解"关系"
1 SQL 的哲学 形如 Linux 哲学一切都是文件,在 SQL 领域也有这样一条至理名言 一切都是关系 2 关系数据库 所谓关系数据库(Relational database)是创建在关系模型基础 ...
- Java基础教程——二维数组
二维数组 Java里的二维数组其实是数组的数组,即每个数组元素都是一个数组. 每个数组的长度不要求一致,但最好一致. // 同样有两种风格的定义方法 int[][] _arr21_推荐 = { { 1 ...
- numpy基础教程--二维数组的转置
使用numpy库可以快速将一个二维数组进行转置,方法有三种 1.使用numpy包里面的transpose()可以快速将一个二维数组转置 2.使用.T属性快速转置 3.使用swapaxes(1, 0)方 ...
- SpringCloud2.0 Eureka Server 服务中心 基础教程(二)
1.创建[服务中心],即 Eureka Server 1.1.新建 Spring Boot 工程,工程名称: springcloud-eureka-server 1.2.工程 pom.xml 文件添加 ...
- mysql基础教程(二)-----分组函数、多表查询、常见函数
分组函数 什么是分组函数 分组函数作用于一组数据,并对一组数据返回一个值. 组函数类型 • AVG() • COUNT() • MAX() • MIN() • SUM() 组函数语法 AVG(平均值) ...
- SpringCloud2.0 Hystrix Feign 基于Feign实现断路器 基础教程(七)
1.启动[服务中心]集群,工程名:springcloud-eureka-server 参考 SpringCloud2.0 Eureka Server 服务中心 基础教程(二) 2.启动[服务提供者]集 ...
随机推荐
- autorelease(转)
autorelease(转) (2013-02-05 18:27:43) 转载▼ 总觉得autorelease这里掌握的不到位,但涉及到内存管理,实在不可小视.今天参考了网上的不少文章和官方A ...
- performance
简介 延缓执行 JavaScript 是一个能有效提高网页加载速度以及提升用户阅读体验质量的途径.从实际经验来看,将我们的网站从经济实惠的 VPS 迁移到 Softlayer(美国著名的一个数据中心) ...
- 如何解决Bluetooth系统设计的棘手问题
我们若想设计一套完善的蓝牙 (Bluetooth) 系统,就必须充分掌握其中的技术知识,例如协议堆栈.射频设计及系统集成等方面的专门知识.LMX9820 芯片的面世令蓝牙系统的设计工作变得更为容易.以 ...
- 【转】Android中BindService方式使用的理解
原文网址:http://www.cnblogs.com/onlylittlegod/archive/2011/05/15/2046652.html 最近学习了一下Android里面的Service的应 ...
- SQL Server 通过一个表和另一个表联合 批量更新这个表的字段
UPDATE OutPzPersonSet SET cPerson = a.AAA --SELECT * FROM OutPzPersonSet d INNER JOIN AAAA a ON d.cz ...
- fstream读写UNICODE文件
今天遇到要处理UNICODE文件的情况,网上找了一圈都是读取出字节,再转的,这个不方便啊!想起了有codecvt这么个东西,顺藤摸瓜,找到了方法. locale utf16(locale(" ...
- 能取悦生理期的女性吗？Le Parcel提供女性卫生用品按月订购服务，不是按包出售而是可以按片自由搭配 | 36氪
能取悦生理期的女性吗?Le Parcel提供女性卫生用品按月订购服务,不是按包出售而是可以按片自由搭配 | 36氪 能取悦生理期的女性吗?Le Parcel提供女性卫生用品按月订购服务,不是按包出售而 ...
- VS2012 中使用Emacs布局
微软的反开源行为导致它不断的衰落,问题是还不反省. 下面这篇文章介绍了如何安装emacs布局的插件: http://marxistprogrammer.blog.163.com/blog/static ...
- SRM 588 D2 L3：GameInDarknessDiv2，DFS
题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12710 采用DFS搜索,第一次写的时候忘了加访问标志,结果状态 ...
- iOS中的界面多选功能－－（UICollectionView）
文/Jacob_Pan(简书作者)原文链接:http://www.jianshu.com/p/9d28ebd0f5a2著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近做项目接触了一 ...