在Angular中,过滤器的功能主要是格式化数据表达式,且可以自定义过滤器。作用域(scope)主要服务于页面模板,在控制器和页面中起桥梁作用,保存模板中的数据对象,为模板中的元素提供方法和属性
过滤器
在Angular中,过滤器主要有三种形式,它们分别是:
(1) 单个过滤器,如:{{表达式 | 过滤器名}}
{{8.88 | currency}} // $8.88
(2) 多个过滤器,如:{{表达式 | 过滤器名1 | 过滤器名2 | ...}}
{{8.88 | currency | filter | ...}}
(3) 带参数过滤器,如:{{表达式 | 过滤器名1 : 参数1 : 参数2 : ...}}
{{8.88 | number : 1}}
排序方式过滤
Document
序号
姓名
性别
年龄
成绩
{{$index+1}}
{{stu.name}}
{{stu.sex}}
{{stu.age}}
{{stu.score}}
上面的示例中视图模板通过ng-repeat
指令绑定数据,调用orderBy
过滤器对分数列进行排序,orderBy
排序过滤器后面带了参数score
,默认以score
为标准进行升序排列,如果要降序排序,在score
前面加个-
即可
我们还可以继续在后面加上过滤器,如limitTo
,它的作用是限制列表显示列数
匹配方式过滤
匹配方式过滤是将字符参数与列表中的各个成员属性值相匹配,如果包含则显示,匹配时不区分大小写。它有三种形式:
(1) 通过filter过滤器直接匹配包含字符参数的数据
{{数据 | filter: '匹配字符'}}
{{data | filter: 80}}
(2) 在字符参数中使用对象形式匹配指定属性的数据
{{数据 | filter: 对象}}
{{data | filter: {score: 80}}}
(3) 在字符参数中使用自定义函数匹配相应数据
{{数据 | filter: 函数名称}}
Document
序号
姓名
性别
年龄
成绩
{{$index+1}}
{{stu.name}}
{{stu.sex}}
{{stu.age}}
{{stu.score}}
自定义过滤器
自定义过滤器需要在页面模块中注册一个过滤器的构造方法,该方法将返回一个以输入值为首个参数的函数,在函数体中实现过滤器的功能
接上面的例子,我们在模块stulist上自定义一个过滤器,它的作用是筛选出年龄在22到28之间的,且性别是被指定的数据
JS代码:
/* 实现自定义过滤器,在模块上使用filter方法,第1个参数是过滤器名,第二个是实现函数
* 在实现里直接返回一个函数
* 过滤器筛选出年龄在22和28之间的,且性别被指定的数据
*/
stulist.filter('young', function(){
return function(e, type) {
var _out = [];
var _sex = type ? '男' : '女';
for(var i=0; i< e.length; i++) {
if(e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex) {
_out.push(e[i]);
}
}
return _out;
}
});
html代码:
{{$index+1}}
{{stu.name}}
{{stu.sex}}
{{stu.age}}
{{stu.score}}
过滤器的应用
表头排序
表头排序是指在使用列表方式显示数据时,用户如果单击列表某列的表头元素,那么列表中的全部数据将会自动按该列的属性值自动排序,默认为升序排列,再次单击会变为降序排列
html:
序号
姓名
性别
年龄
成绩
{{$index+1}}
{{stu.name}}
{{stu.sex}}
{{stu.age}}
{{stu.score}}
javascript:
var stulist = angular.module('MyApp', []);
stulist.controller('stuController', ['$scope', function($scope){
$scope.data = [
{name: '张明明', sex: '女', age: 24, score: 95},
{name: '李青思', sex: '女', age: 27, score: 87},
{name: '刘晓华', sex: '男', age: 28, score: 86},
{name: '陈忠忠', sex: '男', age: 23, score: 97}
];
$scope.title = 'name';
$scope.desc = 0;
}]);
字符查找
字符查找是指通过调用Angular中的filter
过滤器,查找与过滤器冒号后字符参数相匹配的数据,如果匹配则显示,否则不显示
在上面的例子中,我们首先增加一个用于输入过滤关键字的input
// 在js代码中初始化key的值
$scope.key = '';
作用域概述
$scope
对象实质上是一个作用域对象,它能存储数据模型,为表达式提供上下文环境和监听表达式的变化且传播时间,是视图与控制器之间的桥梁
作用域特点
它提供了一个$watch
方法来监听数据模型的变化,ng-model
指令就是通过该方法进行数据的监听,只要有一端发生变化,则另一端自动进行同步更新
它提供了一个$apply
方法,为各种烈性的数据模型改变提供支撑,将它们引入到Angular可控制的范围中。
它为表达式提供了执行的环境,一个表达式必须在拥有该表达式属性的作用域中执行才更加合适
下面的示例说明$watch
如何工作
Document
累计变化次数: {{count}}
作为数据模型的作用域
作用域是控制器与视图的桥梁,也是视图和指令的桥梁
作用域的层级和事件
作用域绑定页面元素后,便依据元素的层次关系形成了自己的层级关系,在这些层级关系中,他们可以通过事件的传播进行数据的通信
作用域的层级
作用域拥有自己的层级,且它有一个顶级作用域$rootScope
,而下面的子级作用域可以创建多个,子级作用域可以继承父级作用域中的全部属性和方法,但同级作用域却不行。
Document
{{parent_name}}, 我是第一个子层控制器的内容
{{parent_name}}, 我是第二个子层控制器的内容
作用域事件的传播
在Angular中,作用域间有非常清晰的层次结构关系,最顶层的是rootscope
作用域,其余的都是在它基础之上进行分支和嵌套的。
那么,我们有两种方法可以实现作用域之间的通信:
(1) 服务(service)
通过在各作用域之间创建一个单例的服务,由该服务来处理各个作用域间的数据通信
(2) 事件(event)
通过作用域之间的事件也可以进行数据通信,Angular提供了两个方法$broadcasted
和$emitted
$broadcasted
方法将事件从父级作用域传播至子级作用域,它有两个参数,eventname
,表示事件名称,data
表示传播过程中携带的数据
$emitted
方法将事件从子级作用域传播至父级作用域,与上面的方法相同。
除了上面的两个方法外,还需要调用$on
方法,在作用域中监控传播来的事件并获取相应的数据。
$on(eventname, function(event, data) {
// 接收传播事件的处理代码
})