Angular 学习之 filter

Angular 学习之 数组filter

1 简介

Angular 提供了很多filter，其中一种就叫做filter，可以选取数组中的部分元素，并返回一个新的数组。

2 用法

可以在html或者js中使用。用法如下：
{{ filter_expression | filter:expression:comparator }}

$filter(‘filter’)(array, expression, comparator)

参数：

• array 待filter的数组
• expression 期待的元素的特征
  为什么说是特征，那是因为expression的比较策略。
  expression的比较策略是substring match，就是只要array中的元素或者它的部分属性包含expression中的属性字符串。如果比较双方非string，那就转化为string再比较。
  expression有三种类型:
  string
  包含此string的元素会被选出，如果元素是object，则任何一个属性值包含此
  string就会被选出。可以在string之前加!表示反选。
  object
  包含此object包含的属性键值对的元素会被选出。
  sample:

expression = {name:'a',age:'100'};
var arr = [
            {name:'abc',age:1000},
            {name:'abc'}];

返回的结果是 [ {name:’abc’,age:’1000’}],因为第二个元素没有age属性。
第一个元素的age属性是int 1000，儿expression中是string 100。
可见filter的比较方式不考虑类型。
function
function可以定义更加详细的特征。
sample:

var arr = [ {name:'abc',age:1000},
            {name:'abc',age:1232},
            {name:'abc',age:"abc"}];
var filtedResult = $filter('filter')(this.array,function(e){
                    return (!angular.isUndefined(e.age))&&e.age%100==0;
                }); 

filter会对每一个arr的元素执行function，如果返回true，就会被选出。
这里表示选择拥有age属性且age能整除100的元素。
结果是{name:'abc',age:1000}，由于age abc是string，无法做除法，所以未被选出。                                 

-comparator
判断expression和array中元素是否相等。
为什么要有comparator？
因为expression是substring match比较，expression function也只是检测array中的元素。并没有提供expression和array元素的比较机制。
comparator有三种
true
当expected和actual完全相等时才能被选中。
false 或者 undefined
相当于没有使用comparator
function
当expression是function时，comparator function失效。
一般很少使用comparator function，具体原因下。

    function(expected,actual){
        return expected>actual;
    }

expected是指expression(如果expression是object，那就指它的属性)，actual是array中的元素（如果expression是object而元素不是object，那此元素直接就忽略了）。返回true时比较通过，对于object，只有当它的所有属性都通过，才会最终被选出。

替代方案
如果必须比较expression和array元素时，可以考虑下面这种方式：

    var arr = [...];
    var expression = [...];
    var filtedArray = $filter('filter')(arr,function(e){
        //compare e and  expression here
    });

在js代码中，可以有很多方式来实现filter的功能。当然在html中，则需要更多的订制才能突破限制。毕竟directive不是那么简单。

3 实用指南

一般filter常用于在html页面中。

3.1 搜索

根据用户输入，过滤页面上的列表。