angular过滤器filter常用方法，自定义过滤器

超、凢脫俗 2022-05-27 05:40 275阅读 0赞

简单介绍AngularJS过滤器filter用法，每个都将列出用法代码以便加深了解；

--------------------

## 内置过滤器： ##

currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)  
用法：  
1.currency(货币)  
使用currency可以将数字格式化为货币，默认美元符号，你可以自己传入所需的符号，如人民币：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp"> <div style="width: 500px;margin: 0 auto;"> <div ng-controller="homeCtr"> { { initNum | currency}} { { initNum | currency:'￥'}} <ul ng-repeat="n in initArr"> <li>{ { n | currency}}</li> </ul> </div> </div> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller('homeCtr',['$scope',function($scope){ $scope.initNum = 10; $scope.initArr = [10,20,30,40,50]; }]) </script> </body> </html>

![这里写图片描述][70]  
2.date(日期)  
原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：

> \{ \{date | date : ‘yyyy-MM-dd hh:mm:ss EEEE’\}\}  
> 参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。

{ { initDate | date:'yyyy/MM/dd hh:mm:ss EEEE'}} <ul ng-repeat="n in initDateArr"> <li>{ { n | date:'yyyy.MM.dd hh:mm:ss'}}</li> </ul>

//
    $scope.initDate = '1523503158789';
    $scope.initDateArr = [
        '1523502700688',
        '1523502953681',
        '1523502971335',
        '1523502980482'
    ]

![这里写图片描述][70 1]  
3 filter(匹配子串)  
filter用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。

<div ng-controller="homeCtr"> 匹配属性值中包含'张'的所有项 <ul ng-repeat="m in initMemberArr | filter:'张'"> <li>{ { m.name}}</li> <li>{ { m.age}}</li> </ul> 匹配属性值中包含 2的所有项 <ul ng-repeat="m in initMemberArr | filter:2"> <li>{ { m.name}}</li> <li>{ { m.age}}</li> </ul> 匹配age属性值中包含 2的所有项 <ul ng-repeat="m in initMemberArr | filter:{age:2}"> <li>{ { m.name}}</li> <li>{ { m.age}}</li> </ul> 匹配id属性值中包含 2,并且age属性中包含2的项 <ul ng-repeat="m in initMemberArr | filter:{id:2} | filter:{age:2}"> <li>{ { m.id}}</li> <li>{ { m.name}}</li> <li>{ { m.age}}</li> </ul> 匹配age属性值 大于 30的项 <ul ng-repeat="m in initMemberArr | filter:ageFilt"> <li>{ { m.id}}</li> <li>{ { m.name}}</li> <li>{ { m.age}}</li> </ul> </div>

app.controller('homeCtr',['$scope',function($scope){ 
                    $scope.initMemberArr = [
                        {
                            id:12,
                            name:'张一',
                            age:20,
                        },
                        {
                            id:23,
                            name:'张二',
                            age:31,
                        },
                        {
                            id:34,
                            name:'李三',
                            age:12,
                        },
                        {
                            id:45,
                            name:'张五',
                            age:33,
                        },
                        {
                            id:56,
                            name:'李六',
                            age:24,
                        }
                    ]
                    //定义返回age属性大于30的方法
                    $scope.ageFilt = function(arr){ 
                        return arr.age > 30;
                    }
                }])

结果如下展示  
![这里写图片描述][70 2]  
4.json(格式化json对象)  
json过滤器可以把一个js对象格式化为json字符串，没有参数。一般也不会在页面上用，或者在js中用，作用如JSON.stringify()，文章最后会写出来在controller里面使用过滤器；权当看看

{ { testObj}} { { testObj | json}} { { initMemberArr}} { { initMemberArr | json}}

$scope.initMemberArr = [
        {
            id:12,
            name:'张一',
            age:20,
        },
        {
            id:23,
            name:'张二',
            age:31,
        }
    ]
    $scope.testObj = {a:1,b:2};

5 limitTo(限制数组长度或字符串长度)  
limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取。

截取字符串前三位 { { initStr | limitTo:3}} initMemberArr 数组截取前两项 ，每项的id截取前四位 <ul ng-repeat = "m in initMemberArr | limitTo:2"> <li>{ { m.id | limitTo:4}}</li> </ul>

$scope.initMemberArr = [
                        {
                            id:'123456789',
                            name:'张一',
                            age:20,
                        },
                        {
                            id:'987654321',
                            name:'张二',
                            age:31,
                        },
                        {
                            id:'234765981',
                            name:'李三',
                            age:12,
                        }
                    ]
                    $scope.initStr = 'abcdefg';

![这里写图片描述][70 3]  
6 lowercase(小写)  
把数据转化为全部小写  
7 uppercase(大写)  
把数据转化为全部大写

{ { str1 | uppercase}} { { str2 | lowercase}}

这两个用法很简单

$scope.str1 = 'abcf';
    $scope.str2 = 'Abcd';

8 number(格式化数字)  
number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定float类型保留几位小数

{ { num1 | number}} 保留四位小数 { { num2 | number:4}} 保留两位小数 { { num3 | number:2}}

$scope.num1 = 123456789;
    $scope.num2 = 1357924680;
    $scope.num3 = 1357.2498;

![这里写图片描述][70 4]  
9 orderBy(排序)  
orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）

> 基本应用格式为:  
> ng-repeat=”item in itemList | orderBy:p1:p2”  
> 参数p1可以是字段名或自定义函数，p2指是否逆序，默认是false  
> //  
> 多字段排序:  
> ng-repeat=”item in itemList | orderBy:\[orderIt,’name’,’-amount’\]  
> 第一个参数传递数组，可以是自定义函数或字段名，字段名前面加“-”，代表倒排序。

按照id排序 <ul ng-repeat=" m in initMemberArr | orderBy : 'id'"> <li>id:{ { m.id}}-------name:{ { m.name}}------age:{ { m.age}}</li> </ul> 按照age排序 <ul ng-repeat=" m in initMemberArr | orderBy : 'age'"> <li>id:{ { m.id}}-------name:{ { m.name}}------age:{ { m.age}}</li> </ul> 按照name排序 <ul ng-repeat=" m in initMemberArr | orderBy : 'name'"> <li>id:{ { m.id}}-------name:{ { m.name}}------age:{ { m.age}}</li> </ul> 按照id降序 <ul ng-repeat=" m in initMemberArr | orderBy : 'id':true"> <li>id:{ { m.id}}-------name:{ { m.name}}------age:{ { m.age}}</li> </ul> 按照id降序,字段前加- <ul ng-repeat=" m in initMemberArr | orderBy : '-id'"> <li>id:{ { m.id}}-------name:{ { m.name}}------age:{ { m.age}}</li> </ul> 多字段排序-按id升序，id一样的，按age的倒序，大的排前； <ul ng-repeat=" m in initMemberArr | orderBy :['id','-age']"> <li>id:{ { m.id}}-------name:{ { m.name}}------age:{ { m.age}}</li> </ul>

$scope.initMemberArr = [
                {
                    id:12,
                    name:'张一',
                    age:20,
                },
                {
                    id:14,
                    name:'张二',
                    age:31,
                },
                {
                    id:13,
                    name:'李三',
                    age:12,
                },
                {
                    id:12,
                    name:'老五',
                    age:28,
                }
            ]

![这里写图片描述][70 5]

## 自定义过滤器 ##

将对象数组中每一项的name改成顺序的第几名 <ul ng-repeat=" m in initMemberArr | joinStr"> <li>id:{ { m.id}}-------name:{ { m.name}}------age:{ { m.age}}</li> </ul>

> 格式就是这样，你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数，参数就定义在return的那个函数中，作为第二个参数，或者更多个参数也可以。

## 过滤器使用 ##

1.使用内置的过滤器，可以像上面写的，直接页面模版中使用，

> \{ \{ expression | filter \}\}；

可以多个filter连用，

> \{ \{ expression | filter1 | filter2 | … \}\}

filter可以接收参数，参数用 : 进行分割

> \{ \{ expression | filter:argument1:argument2:… \}\}

2 在controller中使用，需要注入 $filter使用，  
使用内置的过滤器

使用自定义的过滤器

![这里写图片描述][70 6]

看到这，差不多开发时filter过滤器用法都可以自己写出来哈，只要js知识好些，复杂的过滤器，复杂的自定义过滤器，差不多都可以实现………………………

[70]: /images/20220527/889d103e914640c7a1e6b579fdaefc2e.png
[70 1]: /images/20220527/7cb402fb2e054e5db1a1e4f692604ec2.png
[70 2]: /images/20220527/800d490b0db44749874904f04941ea74.png
[70 3]: /images/20220527/2ace04255d0a4615b97160c06782d4c0.png
[70 4]: /images/20220527/c12ffdc86f9046ba83aea3c111c2b351.png
[70 5]: /images/20220527/60b184ec25154de9b53b5d10f8b535a1.png
[70 6]: /images/20220527/749a117f728c481c9723824114cb4dee.png