使用过滤器

过滤器在数据从作用域传递到指令上时进行转换，但并不改变源数据，这允许在视图中显示时能够灵活地格式化或者转换数据。

AngularJS具有两种类型的内置过滤器：一类是对单个数据进行操作的，另一类是对数据集合进行操作的。

一、过滤单个数据的值

用于单个数据的内置过滤器

currency 对货币值进行格式化，在过滤器名之后添加冒号：，然后添加一个字符串表示想替换成的符号，比如英镑符号。

date 对日期值进行格式化，这个日期可以是字符串，js日期对象或者毫秒数等等。使用这个过滤器时，需要指定过滤器名date，之后跟一个冒号，再然后是一个格式化字符串，由要显示的各个日期成分组成。如data|date:"dd MMM yy"或者 data|date:"shortDate".shortDate是date过滤器的格式字符串，这是date过滤器所支持的常用日期表达式的几个快捷格式之一。快捷格式字符串表见P340.

json 从JS对象创建json字符串,例如data|json。

number 对数字值进行格式化，调整小数位数，根据需要进行四舍五入。应用这个过滤器时，只需使用竖线符号和过滤器名，然后是一个冒号和要显示的小数位数，number过滤器会自动在千分位处插入逗号。data|number:2 保留两位小数

uppercase/lowercase 将字符串格式化为全部大写或者全部小写,例如data|uppercase.

本地化过滤器输出

currency、number和date过滤器都支持使用本地化规则对数据进行格式化，规则定义在本地化文件中。

 二、过滤集合

2.1 限制项目数量limitTo

limitTo过滤器可以限制从一个数据对象构成的数组中取出的项目的数量，这在一个仅能容纳一定数量项目的页面中尤为有用。

limitTo过滤器配置为一个整数，例如data|limitTo:5，过滤器会从数组中选出最前5个对象。如果你选择一个负数，例如data|limitTo:-5，过滤器会从数组中选出最后五个对象。

如果你指定了一个大于数组大小的数值，LimitTo过滤器将会返回数组中所有对象。

2.2 选取项filter

filter过滤器用于从数组中选出一些对象。选取条件可以指定为一个表达式，或者一个用于匹配属性值的map对象，或者一个函数。

例如data|filter:{category:'Fish'},通过map对象进行选取，指定了想要选取的对象必须是category属性为fish的。

如果你通过一个函数过滤，选出的项目将会是那些使得函数执行结果返回true的。

$scope.selectItems=function(item){
    return item.category=='Fish'||item.name=='Beer';
}

<tr ng-repeat="p in products|filter:selectItems">

</tr>

在本例中，定义了一个名为selectItems的作用域行为。这个行为将会依次调用集合中的每个项，并按照顺序返回每个对象。

2.3 对项目进行排序 orderBy

使用如下：<tr ng-repeat="p in products | orderBy:'price'"></tr> 这里price需要加引号，如果不加引号，orderBy会失败，会假设你想使用一个名为price的作用域变量或者控制器变量，并且认为你将会在某处着手定义这个变量。

1）设置排序方向

在只设定一个属性名的情况下，相当于隐式地请求过滤器为对象进行升序排列，可以通过显式地使用+或-字符来设置排序顺序。在属性名前加入一个负号前缀（-），就指定了应该按照降序排列对象，前缀指定为正号（+）或者不指定前缀，则具有升序排列的效果。

2）使用函数排序

之所以需要小心的将属性名指定为字符串的原因是因为orderBy过滤器也能够使用一个函数进行排序，也就是说允许不直接按照某个属性值的方式进行排序。用于排序的函数需传入一个数据数组中的对象，然后返回一个在排序时用于比较的对象或值。

<tr ng-repeat="p in products | orderBy:myCustomSorter">
     <td>{{p.name}}</td>
     <td>{{p.category}}</td>
     <td>{{p.expiry}}</td>
     <td class="text-right">{{p.price | currency }}</td>
</tr>

$scope.myCustomSorter = function (item) {
      return item.expiry < 5 ? 0 : item.price;
}  

这个函数的效果是，在升序排序下凡是具有较小expiry值的那些项将被放在数据数组的前端。

3）用多个谓语进行排序

可以配置orderBy过滤器为一个属性名或函数名构成的数组，用于依次进行排序。如果两个对象对于数组中的第一个属性或者函数具有相同的值，然后orderBy过滤器就会考虑使用第二个值或函数，依次继续下去直到能够对数据对象分出次序，或者尝试完所有的属性/函数。

<tr ng-repeat="p in products | orderBy:[myCustomSorter, '-price']">
    <td>{{p.name}}</td>
    <td>{{p.category}}</td>
    <td>{{p.expiry}}</td>
    <td class="text-right">{{p.price | currency }}</td>
</tr>

三、链式过滤器

过滤器通过竖线（|）符号链式连接在一起，并按照所写下的顺序执行计算。

<tr ng-repeat="p in products | orderBy:[myCustomSorter, '-price'] | limitTo: 5">

先执行orderBy，然后再执行limitTo

四、创建自定义过滤器

4.1 创建格式化数据值的过滤器

过滤器是由Module.filter方法创建的，该方法接收两个参数：待创建的过滤器名称和一个工厂函数。

angular.module("exampleApp")
    .filter("labelCase", function () {
        return function (value, reverse) {
            if (angular.isString(value)) {
                var intermediate =  reverse ? value.toUpperCase() : value.toLowerCase();
                return (reverse ? intermediate[0].toLowerCase() :
                    intermediate[0].toUpperCase()) + intermediate.substr(1);
            } else {
                return value;
            }
        };
    });

工人函数接收两个参数：第一个是待过滤的值（在应用过滤器时由AngularJS提供），第二个参数用于允许过滤器用途被颠倒过来，也就是首字母为小写而剩余其他字母为大写。

引入过滤器文件的script元素要放在定义模板的文件后面，因为js文件中的代码依赖于已经被定义的这个模板。

<tr ng-repeat="p in products | orderBy:[myCustomSorter, '-price'] | limitTo: 5">
    <td>{{p.name | labelCase }}</td>
    <td>{{p.category | labelCase:true }}</td>
    <td>{{p.expiry}}</td>
    <td class="text-right">{{p.price | currency }}</td>
</tr>

4.2 创建一个集合过滤器

.filter("skip", function () {
        return function (data, count) {
            if (angular.isArray(data) && angular.isNumber(count)) {
                if (count > data.length || count < 1) {
                    return data;
                } else {
                    return data.slice(count);
                }
            } else { 
                return data;
            }
        }
    });

<tr ng-repeat="p in products | skip:2 | limitTo: 5">
      <td>{{p.name}}</td>
      <td>{{p.category}}</td>
      <td>{{p.expiry}}</td>
      <td class="text-right">{{p.price | currency }}</td>
</tr>

这里传给skip过滤器的data的是整个数组对象，而不是数组中的某一个对象。

4.3 在已有的过滤器上搭建新的过滤器

.filter("take", function ($filter) {
        return function (data, skipCount, takeCount) {
            var skippedData = $filter("skip")(data, skipCount);
            return $filter("limitTo")(skippedData, takeCount);
        }
        
    });

<tr ng-repeat="p in products | take:2:5">
     <td>{{p.name}}</td>
     <td>{{p.category}}</td>
     <td>{{p.expiry}}</td>
     <td class="text-right">{{p.price | currency }}</td>
</tr>

这是第一次使用一个worker函数需要多于一个配置参数的过滤器，可以看到为这些参数提供值时使用冒号将他们进行分割的。