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

引言

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

2 自定义有属性的过滤器

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

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