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.启动[服务提供者]集 ...
随机推荐
- 『安全科普』HTTP协议讲解及手工模拟发送
学习,熟悉HTTP协议,便于以后进行HTTP重放攻击! 0x 01 HTTP协议 查看HTTP协议 先查看鼠标点击一个链接后,浏览器发出了怎样的HTTP请求. Chrome浏览器下,按F12进入开发者 ...
- 工控主板EM9161对ISO7816协议的支持
在当前的金融POS终端及相关领域,ISO7816通讯协议得到了广泛应用.英创的工控主板EM9161,可在其异步串口的基础上,通过简单的设置,就可把串口转为符合ISO7816协议的接口,实现与各种智能卡 ...
- UltraEdit-32 恢复到初始默认配置
不小心把UltraEdit-32搞乱了,字体不管怎么设置,都回不去了..然后那些菜单也被弄得乱七糟八的....于是就想把这些设置都搞成默认的.重装UltraEdit-32.清理注册表.结果发现都没有用 ...
- Android SDK 下载速度慢解决方法
Mac 本搞Android开发,遇到Android SDK 下载速度慢,解决方法大概有两种.第一,FQ.这种方法比较彻底,但是要想有稳定的效果还的要花大价钱.第二,有些高人直接给了SDK中各软件的下载 ...
- BZOJ2292: 【POJ Challenge 】永远挑战
2292: [POJ Challenge ]永远挑战 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 513 Solved: 201[Submit][ ...
- 【转】Android中BindService方式使用的理解
原文网址:http://www.cnblogs.com/onlylittlegod/archive/2011/05/15/2046652.html 最近学习了一下Android里面的Service的应 ...
- 移动web开发研究
1.jQuery Mobile jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面.jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格 ...
- android推送-PHP(第三方推送:个推)
在项目初期,就安卓推送功能怎么做,曾经参考过例如XMPP之类的推送方法.但苦于那些是些英文档案,又没太多时间研究,所以打算采用第三方推送(个推,极光推送等),后来在美图技术老大推荐下用采用个推. PS ...
- python标准库之字符编码详解
codesc官方地址:https://docs.python.org/2/library/codecs.html 相关帮助:http://www.cnblogs.com/huxi/archive/20 ...
- BuguMongo是一个MongoDB Java开发框架，集成了DAO、Query、Lucene、GridFS等功能
http://code.google.com/p/bugumongo/ 简介 BuguMongo是一个MongoDB Java开发框架,它的主要功能包括: 基于注解的对象-文档映射(Object-Do ...