angularJS----filter

　　　　angularJS过滤器

　　　　过滤器（filter）正如其名，作用就是接收一个输入（隐式的接收数据源），通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。

　　　　ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。

　　　　过滤器的使用：过滤器可以使用一个管道字符（|）添加到表达式和指令中。

　　　　具体使用：

　　　currency（格式化货币单位）

　　　　　格式：| currency：[-货币单位（可以自定义，默认是$）] ：[-小数指定位数（自动四舍五入）,默认是2位小数]　　注：本章凡是有[-] ，代表是可选参数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="">

    <!-- 内置过滤器：currency（格式化货币） -->

     <p>{{ 12 + 12 + 0.01 | currency}}  <!--化为货币，默认单位符号为 '$', 小数默认2位 => $12.00--></p>

    <p>{{ 12.45 | currency:'￥'}} <!--将12.45格式化为货币，使用自定义单位符号为 '￥', 小数默认2位--></p>

    <p>{{ 12.45 | currency:'CHY￥':3}} <!--将12.45格式化为货币，使用自定义单位符号为 'CHY￥', 小数指定3位, 会执行四舍五入操作 --></p>

    <p>{{ 12.55 | currency:undefined:2}} <!--将12.55格式化为货币， 不改变单位符号， 小数部分将四舍五入 --></p>

</body>

</html>

　　　　效果如下：

　　date（格式化日期）

　　　　格式： | date: MM *dd* yyyy * h* mma 注：y M d h m s E 分别表示年月日时分秒星期

　　　　*号表示随意插入符号（如：- / : 年，月，日等）你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。我们完全可以根据自己的意愿组合出想要的格式

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="">

    <p>{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy h:mma"}}  <!--使用ISO标准日期格式--></p>

    <p>{{ 1432075948123 | date:"MM/dd/yyyy h:mma"}} <!--使用13位（单位：毫秒）时间戳--></p>

    <p>{{ 1432075948123 | date:"MM/dd/yyyy h:mma":"UTC"}} <!--指定timezone为UTC --></p>

    <p>{{'04/07/2017' | date: 'yyyy年MM月dd日'}}</p>

</body>

</html>

　　效果如下：

　　filter（匹配子串）

　　　　这个名叫filter的filter（不得不说这名字起的，真让人容易混淆—_—！）用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。格式： | filter ： fn/string/obj 接收一个参数，用来定义子串的匹配规则。个人感觉有点像模糊匹配的意思。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myContrl">

    <!-- 内置过滤器  filter-->

　　//匹配属性值含有“m”的

    <p>{{ arr | filter : 'm' }}</p>

　　//匹配属性值含有20的

    <p>{{ arr | filter :  20 }}</p>

　　//参数是对象，匹配name属性中含有 ‘a’的

    <p>{{ arr | filter : {name: "a"} }}</p>

　　//参数是函数，指定返回符合条件的项

    <p>{{ arr | filter : fn }}</p>

    <script>

        var myApp = angular.module('myApp',[]);

        myApp.controller('myContrl', ["$scope",function($scope){

            $scope.arr=[

                {name:'tom', age: 18},

                {name:'sam', age: 19},

                {name:'jack', age: 20},

                {name:'hellen', age: 21}

            ];

            $scope.fn=function(e){

                return e.age< 21;

            }

        }])

    </script>

</body>

</html>

　　效果如下：

　　json（格式化json对象）

　　　　格式： | json 无参数 json过滤器可以把一个js对象格式化为json字符串作用就和我们熟悉的JSON.stringify()一样。用法超级简单：

　　　　{{ jsonTest | json}}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myContrl">

    <!-- 内置过滤器  json-->

    <p>{{ oJson | json }}</p>

    <script>

        var myApp = angular.module('myApp',[]);

        myApp.controller('myContrl', ["$scope",function($scope){

            $scope.oJson=[

                {

                    "name": "jjk",

                    "age": 18

                },

                {

                    "name": "dk",

                    "age": 19

                }

            ];

            $scope.fn=function(e){

                return e.age< 21;

            }

        }])

    </script>

</body>

</html>

　　效果如下：

　　limitTo（限制数组长度或者字符串长度）

　　　　limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度注：只能从数组或者字符串的开头截取

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myContrl">

    <!-- 内置过滤器  limitTo-->

    <p>{{ oJson | limitTo : 1 }}</p>

    <script>

        var myApp = angular.module('myApp',[]);

        myApp.controller('myContrl', ["$scope",function($scope){

            $scope.oJson=[

                {

                    "name": "jjk",

                    "age": 18

                },

                {

                    "name": "dk",

                    "age": 19

                }

            ];

            $scope.fn=function(e){

                return e.age< 21;

            }

        }])

    </script>

</body>

</html>

　　效果如下：

　　lowercase(小写)

　　　　把数据转化为全部小写。格式： | lowercase

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myContrl">

    <!-- 内置过滤器  lowercase-->

    <p>{{ str |lowercase }}</p>

    <script>

        var myApp = angular.module('myApp',[]);

        myApp.controller('myContrl', ["$scope",function($scope){

            $scope.str= "Hello, World!"

        }])

    </script>

</body>

</html>

　　效果如下：

　　uppercase(大写）

　　　　把数据转化为全部小写。格式： | uppercase

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myContrl">

    <!-- 内置过滤器  uppercase-->

    <p>{{ str |uppercase }}</p>

    <script>

        var myApp = angular.module('myApp',[]);

        myApp.controller('myContrl', ["$scope",function($scope){

            $scope.str= "Hello, World!"

        }])

    </script>

</body>

</html>

　　效果如下：

　　number(格式化数字)

　　　　格式化数字为一个数字加上千位分割，同时接收一个参数，指定保留几位小数格式： | number ：[-num]

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="">

    {{ "3456789" | number}}

    <br />

    {{ 12345678 | number:3}}

</body>

</html>

　　效果如下：

　　orderBy(排序)

　　　　将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myContrl">

    <!-- 内置过滤器  orderBy-->

　　//按照age属性值排序

    <div>{{ arr | orderBy : "age"}}</div>

　　//按照函数的返回值排序

    <div>{{ arr | orderBy : fn}}</div>

　　　//如果age相同，则按name排序

    <div>{{ arr | orderBy : ["age","name"]}}</div>

     <script>

        var myApp = angular.module('myApp',[]);

        myApp.controller('myContrl', ["$scope",function($scope){

            $scope.arr=[

                {name:'tom', age: 18},

                {name:'sam', age: 19},

                {name:'jack', age: 20},

                {name:'hellen', age: 20}

            ];

            $scope.fn=function(e){

                return e.name;

            }

        }])

    </script>

</body>

</html>

　　效果如下：

　　内置的过滤器就介绍到这里了

　　现在来讲讲自定义的过滤器：filter的自定义方式很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。

　　形式： var app=angular.module("myapp", []).filter("过滤器名称", function(){ return function(){....} }，返回的函数接受2个参数：参数1--表达式的值，参数2--可选

　　demo如下：

myAppModule.filter("reverse",function(){

                return function(input,uppercase){

                    var out = "";

                    for(var i=0 ; i<input.length; i++){

                        out = input.charAt(i)+out;

                    }

                    if(uppercase){

                        out = out.toUpperCase();

                    }

                    return out;

                }

            });

　name | reverse    input就是代表name的值。

具体实例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

    <div>name:{{name}}</div>

    <div>reverse:{{name | reverse}}</div>

    <script>

        var myApp = angular.module("myApp", []);

        myApp.controller("myCtrl",["$scope",function($scope){

            $scope.name = "tom";

        }]);

        myApp.filter("reverse", function(){

            return function(input){

                for(var i=0;i<input.length;i++){

                    var str=input.charAt(i)

                }

                return str;

            }

        })

    </script>

</body>

</html>

　　chrome显示如下：

ok，过滤器简单的总结已经差不多了，细节问题以后会慢慢补充！