（9）AngularJS 1.X 之自定义过滤器

1.引言

      在上一篇博客中我们说了9个AngularJS提供的过滤器，在真实开发环境中AngularJS提供的9中过滤器远远不能满足我们的需求，在很多的时候我们需要自定义我们自己的过滤器，在本篇博客中我们就介绍一下如何创建我们自己的过滤器，然后如何在表达式中创建自己的过滤器，如何在过滤器服务中使用自己的过滤器。

2.自定义过滤器

      在自定义过滤器之前，我们先看看一个AngularJS提供的过滤器都有哪几部分组成，我们看{{ orderBy_expression | orderBy : expression : reverse}}，分析这个过滤器大致可以分为三部分：

• 过滤器的名称
• 过滤器要处理的数据（也就是过滤器的输入值）
• 过滤器所需要的属性（属性是可选的）

      通过上面的分析，我们可以知道一个过滤器分为三个部分，属性是可选的，过滤器的名称是必须的，过滤器所处理的数据也是必须的，现在我们就自定义两个过滤器。

2.1 自定义没有属性的过滤器

      我们创建一个过滤器，所实现的功能：将hello js替换成hello javascript，过滤器的名称为myFilter。

• 引入AngularJS函数库（略）
• 创建自定义的过滤器（myFilter）

        //创建了一个过滤器
        var app=angular.module("myApp",[]);
        app.filter('myFilter',function(){
            return function(input){
                //input为我们表达式的输出值，也就是hello js
                //这个函数的返回值就是过滤器的返回值
                return input.replace(/js/, "javascript");
            }
        });

• 在表达式中使用我们自定义的过滤器

{{"hello js"|myFilter}}//输出结果为hello javascript

2.2 自定义有属性的过滤器

      我们创建一个过滤器：过滤器的名称为myFilter，过滤器可以填写一个属性，这个属性是boollen类型，如果是true，那么将hello js替换成hello javascript，如果false,那么将hello js替换成hello JAVASCRIPT，接下来我们实现这个过滤器。

• 引入AngularJS函数库（略）
• 创建自定义的过滤器（myFilter）

    var app=angular.module("myApp",[]);
        app.filter('myFilter',function(){
            return function(input,attr){
                //input为我们表达式的输出值，也就是hello js
                //attr是我们输入的属性值，如果可以输入两个属性，那么在函数中继续添加属性
                //这个函数的返回值就是过滤器的返回值
                if(attr){
                    return input.replace(/js/, "javascript");
                }else{
                    return input.replace(/js/, "JAVASCRIPT");
                }

            }
        });

• 在表达式中使用我们的过滤器

{{"hello js"|myFilter:true}}//输出结果为：hello javascript
{{"hello js"|myFilter:false}}//输出结果为：hello JAVASCRIPT

2.3 自定义过滤器中使用服务

      在创建我们的过滤器时，我们可以将服务注入进去，只要有供应商的服务都可以注入到过滤器方法中，现在我们就在自定义过滤器中使用服务，现在我们自定义一个自己的过滤器，实现的功能为：将字符串转换为大写：

• 创建过滤器

        var app=angular.module("myApp",[]);
        app.filter('myLowercase',function($filter){
            return function(input){
                //input为我们表达式的输出值，也就是hello js
                //$filter就是注入进来的过滤器服务
                return  $filter("lowercase")(input);
            }
        });

• 使用我们的表达式

{{"HELLO JS"|myLowercase}}//运行结果为：hello js