（8）AngularJS 1.X 之过滤器

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代表是否逆序排列。