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.启动[服务提供者]集 ...
随机推荐
- 理想与现实——观电影《Dead Poets Society》有感
我们每一个人都注定要死去,看看那些旧照片,照片里的年轻人现在都在哪里呢?也许有的人曾经充满活力,曾经信誓旦旦地要去改变这个世界,但如今却变得只知道顺从,如果你去问他们,他们会说:大概这就是现实吧. 现 ...
- InputStream转为byte数组
InputStream is = request.getSession().getServletContext().getResourceAsStream("/WEB-INF/swdjzbg ...
- absolute vs fixed
<!DOCTYPE html> <html> <head> <title>absolute和fixed的区别</title> <sty ...
- 使IE6支持:hover效果
:hover是在CSS中用来制作效果最常用到的一个伪类,比如:标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的,对于只支持css1的浏览器 ...
- 特征提取（Detect）、特征描述（Descriptor）、特征匹配（Match）的通俗解释
特征匹配(Feature Match)是计算机视觉中很多应用的基础,比如说图像配准,摄像机跟踪,三维重建,物体识别,人脸识别,所以花一些时间去深入理解这个概念是不为过的.本文希望通过一种通俗易懂的方式 ...
- 微软 Dynamics AX 学习步骤
第一步:了解到AX的架构,AOT结构,了解AOT中表,窗体,类,job,菜单,菜单项的基础开发.知道代码可以写在那里,每个对象以及对象内部的具体设置.如果你不了解类,继承,这些,那么就需要找一下讲述类 ...
- 详解HashMap的内部工作原理
本文将用一个简单的例子来解释下HashMap内部的工作原理.首先我们从一个例子开始,而不仅仅是从理论上,这样,有助于更好地理解,然后,我们来看下get和put到底是怎样工作的. 我们来看个非常简单的例 ...
- sql的交叉连接，内连接，左外连接，右外连接，全外连接总结
实践是最好的检验,一直都对这几个连接查询出来的结果有什么不同不大理解,然后自己放一块查询比较了一下,用结果来说话~ 先建两张表如下: t1: id name age 1 张三 18 2 李四 25 t ...
- Hibernate中Session的几个方法的简单说明
Hibernate对普通JDBC的操作进行了轻量级的封装,使得开发人员可以利用Session对象以面向对象的思想来实现对关系数据库的操作. 一般通过Configuration对象读取相应的配置文件来创 ...
- eclipse中使用git提交代码到github
这里假设你已经拥有了github账号,建好了带提交的eclipse工程,进行了本地git的提交.本文只介绍在eclipse通过git插件将代码push到github 1.登录github新建repos ...