（8）AngularJS 1.X 之过滤器

引言

在表达式中使用过滤器
1 currency过滤器的使用

2 lowercase过滤器的使用

3 uppercase过滤器的使用

4 json过滤器的使用

5 data过滤器的使用

6 number过滤器的使用

7 limitTo过滤器的使用

8 orderBy过滤器的使用

9 filter过滤器的使用

过滤器在指令中的使用

过滤器在服务中的使用js代码中使用
1 lowercase过滤器

2 json过滤器

3 uppercase过滤器

4 limitTo过滤器

5 date过滤器

6 currency过滤器

7 number过滤器

8 orderBy过滤器

9 filter过滤器

10 过滤器在js对象使用总结

1.引言

在本篇博客中主要介绍一下

AngularJS

过滤器，过滤器主要应用于表达式，部分指令，过滤器还可以应用在控制器中（过滤器服务），

AngularJS

一共给我们提供了9种过滤器，分别为：

currency

,

date

,

filter

,

json

,

limitTo

,

lowercase

,

number

,

orderBy

,

uppercase

,首先我们看一下这个每一种过滤器所起到的作用：

currency

：格式化数字为货币形式

date

：格式化date对象到字符串

filter

：从array中选择一个条目子集，并作为一个新数组返回

json

：允许转换一个JavaScript对象到JSON字符串

limitTo

：截取字符串

lowercase

：转换字符串为小写形式。

number

: 格式化数字到文本。

orderBy

：字符串按照字母排序

uppercase

：转换字符串到大写形式。

上述九种过滤器便是

AngularJS

提供的过滤器，接下来我们就来看看过滤器的各种用法。

2. 在表达式中使用过滤器

2.1

currency

过滤器的使用

currency

过滤器主要用于货币的格式化，它的使用方式为：

{{ currency_expression | currency : symbol}}

currency_expression

：表示

AngularJS

表达式

currency

：代表使用

currency

过滤器

symbol

：是一个可选参数，如果不写，默认是美元符。

我们看一下这个过滤器的使用，代码如下：

如果不写

symbol

参数

{{100|currency}} //输出结果为：$100.00

如果写

symbol

参数（也就是说：symbol参数控制货币的符号）

{{100|currency:'&&&&'}} //输出结果为：&&&&100.00
{{100|currency:'￥'}} //输出结果为：￥100.00

2.2

lowercase

过滤器的使用

这个过滤器很简单就是将字符串字母变为小写字母

{{ uppercase_expression | lowercase}}

，代码如下：

//注意这里写的是字符串
{{'ABCD'|lowercase}}//输出结果为：abcd

2.3

uppercase

过滤器的使用

这个过滤器很简单就是将字符串字母变为大写字母

{{ uppercase_expression | uppercase}}

，代码如下：

{{'abcd'|uppercase}}//输出结果为：ABCD

2.4

json

过滤器的使用

json过滤器也非常简单，没有任何参数，只是将json对象转换成字符串输出，该过滤器为：

{{ json_expression | json}}

，代码如下：

{{ {foo: "bar", baz: 23} | json }}//输出结果为：{ "foo": "bar", "baz": 23 }

2.5

data

过滤器的使用

data

过滤器是格式化输出我们的data对象，该过滤器为：

{{ date_expression | date : format}}

date_expression

:是表达式

date

:使用

data

过滤器

format

：可选参数，日期输出的格式化

接下来我们使用一下这个过滤器

不使用

format

参数

//这是我们的控制器
var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope) {
$scope.time=new Date();
});
//这是我们的表达式
{{ time | date }}//输出结果为：Feb 7, 2017

使用

format

参数

//这是我们的控制器
var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope) {
$scope.time=new Date();
});
//这是我们的表达式
{{ time | date :"'yyyy-MM-dd"}}//输出结果为：2017-02-07

2.6

number

过滤器的使用

关于

number

过滤器的使用，是格式化数字输出，这个过滤器为：

{{ number_expression | number : fractionSize}}

number_expression

：表达式

number

：使用

number

过滤器

fractionSize

：可选参数，可以控制数字的小数点位数,，如果不填，默认为3

现在我们看一下这个过滤器的使用。

没有使用

fractionSize

参数

{{ 1.234567 | number }}//输出结果为：1.234

使用

fractionSize

参数

{{ 1.234567 | number:6 }}//输出结果为：1.234567

2.7

limitTo

过滤器的使用

limitTo

过滤器是用来截取字符串和对对象，他的使用方式为：

{{ limitTo_expression | limitTo : limit}}

limitTo_expression

：字符串表达式或者对象

limitTo

:使用

limitTo

过滤器

limit

：代表字符串截取的长度，如果是正数是从前面截取，如果是负数是从后面截取

接下来我们看一下这个过滤器的使用

字符串的截取

{{ 'abcde' | limitTo:2 }}//运行结果：ab
{{ 'abcde' | limitTo:-2 }}//运行结果：de

对象的截取

//创建我们的控制器
var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope) {
$scope.persons= [
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
});
//表达式
{{persons|  limitTo:1}}
//运行结果
[{"age":20,"id":10,"name":"iphone"}]

2.8

orderBy

过滤器的使用

关于

orderBy

过滤器的使用：字符串按字母顺序排序，数字按大小排序，这个表达式为：

{{ orderBy_expression | orderBy : expression : reverse}}

orderBy_expression

：排序的字符串

orderBy

：使用

orderBy

过滤器

expression

:一个决定顺序的声明

reverse

：是一个

boollen

类型，是正序排列还是逆序排列,如果不填默认为

false

接下来我们用几个例子来看一下这个过滤器的使用：

根据

id

正序排列

//定义我们的控制器
var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope) {
$scope.persons= [
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
});
//我们的表达式，根据id字段正序排序
{{persons|  orderBy:'id':false}}
//上面表达式等价于
{{persons|  orderBy:'id'}}
//运行结果
[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

根据

id

逆序排列

//定义我们的控制器
var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope) {
$scope.persons= [
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
});
//我们的表达式，根据id字段正序排序
{{persons|  orderBy:'id':true}}
//运行结果
[{"age":44,"id":12,"name":"test abc"},{"age":12,"id":11,"name":"sunm xing"},{"age":20,"id":10,"name":"iphone"}]

2.9

filter

过滤器的使用

filter

过滤器主要用于查找，也就是在

array

中选择一定的条目，然后返回一个新数组，该过滤器的形式为：

{{ filter_expression | filter : expression : comparator}}

filter_expression

:代表数组源

filter

：使用

filter

过滤器

expression

：筛选的条件

comparator

：是一个比较器，比如筛选的时候是否区分大小写，这个可以是一个函数对象，用于比较。

现在我们来看一下这个过滤器的使用

代码实现

//定义我们的控制器
var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope) {
$scope.persons= [
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
});
//表达式（查找带有字符串s的行）
{{persons|filter:'s'}}
//运行结果
[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
//表达式（注意：{'name':'iphone'}后面有一个空格）查找name字段为iphone的对象
{{ persons | filter:{'name':'iphone'} }}
//运行结果
[{"age":20,"id":10,"name":"iphone"}]

3.过滤器在指令中的使用

关于过滤器在指令中的使用在这里举一个例子

ng-repeat

指令中的使用，代码如下：

//控制器的实现
var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope) {
$scope.persons= [
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
});
//html片段（根据name字段筛选对象）
<input type="text" ng-model="my">
<div>
<li ng-repeat="p in persons|filter:{name:my}">{{p.id}}---{{p.age}}---{{p.name}}</li>
</div>

运行结果

4. 过滤器在服务中的使用（js代码中使用）

在前面我们使用了过滤器，分别是在表达式中使用，还有就是在指令中使用，其实过滤器的使用还可以在

js

代码中使用，

AngularJS

为我们提供了一个

$filter

服务，此服务可以注入到我们js代码中使用，接下来我们就来简单的看一下这9种过滤器在js代码中如何使用呢？

4.1

lowercase

过滤器

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('lowercase')("ABCD")
//text值为abcd
});

4.2

json

过滤器

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('json')({name:"wpx",age:20})
});
//text值是字符串：{ "name": "wpx", "age": 20 }

4.3

uppercase

过滤器

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('uppercase')("abcd")
//text值为ABCD
});

4.4

limitTo

过滤器

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('limitTo')("abcde","2")
});
//text值为ab

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('limitTo')("abcde","-2")
});
//text值为de

4.5

date

过滤器

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('date')(new Date(),"yyyy-MM-dd")
});
//text返回值为：2017-02-07

4.6

currency

过滤器

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('currency')(20,"%")
});
//text的值为：%20.00

4.7

number

过滤器

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('number')(20,"4")
});
//text的值为：20.0000

4.8

orderBy

过滤器

//逆序排列我们的数组，返回值text是一个对象数组
var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('orderBy')([
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
],"id",true)
});

4.9

filter

过滤器

var app=angular.module("myApp",[]);
app.controller("firstController", function ($scope,$filter) {
$scope.text=$filter('filter')([
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
],{name:"iphone"})
});
//返回值是一个对象，是filter过滤器筛选之后的结果

4.10 过滤器在js对象使用总结

过滤器在javascript中的使用一般形式是这样的：

$filter()()

$filter

服务有两个参数，第一个参数是过滤器的名称，第二个参数是一个参数列表。

我们来看该服务的第二个参数，第二个参数的第一个是输入的值，后面的参数分别为过滤器所需要的内容。

以

orderBy

过滤器为例，看一下这个服务

$filter('orderBy')(array, expression, reverse)

,我们看第二个参数

array

是输入的排序数组，

expression

是过滤表达式，

reverse

代表是否逆序排列。