angular js Filter

说说AngularJS中的filter

如果你熟悉AngularJS的话，一定记得其中有一个叫做filter，过滤器的东西。说的简单通俗一点，顾名思义，过滤器就是用来过滤变量值的东西，当然，这里的过滤可以是删除也可以是添加，具体我们会在后面一一讲解。

AngularJS本身为我们提供了不少内建的过滤器，比如说：currency – 用来将变量转换成货币表现形式，例如：

<div>{{ amount | currency}}</div>   

如果此时$scope.amount = 1234.56，那么经过currency过滤的amount就会变为$1,234.56。值得一提的是，过滤器是可以添加参数的，具体添加参数的方式是：

:arg1:arg2  

也就是说，每添加一个参数，就在相应过滤器后面加上一个冒号，然后在冒号后面加上参数。拿上面的currency举例，我们可以为它添加标示符参数，例如：

 <div>{{ amount | currency:"USD$"}}</div>  

假设$scope.amount此时还是1234.56，那么经过currency过滤器的amount变为USD$1,234.56。

AngularJS中为我们提供了一共9个内建的过滤器，分别是currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase。具体的用法在AngularJS的文档中都有详细说明。但是在具体使用中，我们常常会发现这些过滤器可能不能满足我们比较复杂的要求，这个时候就需要我们来编写自定义过滤器。

编写AngularJS自定义过滤器其实非常简单。如果你写过AngularJS的factory service，一定记得它返回一个对象或者是一个函数，编写自定义过滤器的形式和它非常相像，你在编写的时候，只需要一个带有一个以上参数的函数即可。它的大致形式是这样的：

app.filter('过滤器名称',function(){
    return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
        //...做一些事情  
        return 处理后的对象;
    }
});     

实在是太简单了对吧。如果还是有点迷惑，我们下面来举几个例子。

例子1 编写过滤器在字符串后面加上感叹号

app.filter('filter1',function(){
    return function(item){
        return item + '!';
    }
});  

实在太简单了，一学就会！item是我们需要处理的那个字符串，所以我们将item的后面加上了一个感叹号然后返回。因此 {{ ‘aaa’ | filter1 }}就会变成’aaa!’。

例子2 编写过滤器，根据参数在字符串后面加上相应个数的感叹号

app.filter('filter2',function(){
    return function(item,num){
        for(var i = 0;i < num;i++){
            item = item + '!';
        }
        return item;
    }
});

太简单了，地球人都知道！

例子3 用过滤器处理一个数组，在数组的每一项后面都加上感叹号

在使用ng-repeat等指令的时候，我们经常需要使用过滤器来对其中的一些项目进行过滤，这里值得注意的一点是，在针对数组进行过滤的时候，返回函数的第一个参数是全部数组，同时最后函数也要返回全部数组。比如：

app.filter('filter3',function(){
    return function(items){
        angular.forEach(items,function(item){
            item = item + '!'
        });
        return items;
    }
});  

如果我们在HTML中这样使用:

<ul>
    <li ng-repeat='item in items | filter3'> {{item}} </li>
</ul>

而$scope.items = [’a’,’b’,’c’]，那么最终的结果是:

<ul>
    <li>a!</li>
    <li>b!</li>
    <li>c!</li>
</ul>  

非常简单对吧！

除了上面提到的意外，我们还可以通过将$filter注入控制器中，以便我们可以在控制器中使用AngularJS内建的或者我们自定义的过滤器，具体的使用方法为：

app.controller('myCtrl',function($scope,$filter){
    ...

    $filter('过滤器名称')(需要过滤的对象,参数1,参数2,...); 

    ...
});  

比如我们就可以这样使用：

$filter('currency')($scope.amount,'$USD');  

过滤器看起来简单，但是在显示的AngularJS应用开发中确实不可或缺的一个东西。为了让我们更加顺手的开发AngularJS应用，少年们认真学好过滤器吧！