angularJSFilter 过滤器

Posted 2021-01-26 To Be Yourself

　　当从后台获取到的数据呈现到视图上时，此时可能需要对数据进行相应的转换，此时我们可以通过过滤器在不同页面进行不同数据的格式抓换，在AngularJS中有常见默认的过滤器，当然若不满足所需，我们可以自定义过滤器。

AngularJS 过滤器可以用来格式化数据，过滤器能够用在表达式和指令中。

使用一个管道字符（|）添加到表达式和指令中。

默认过滤器

列举AngularJS中常见的过滤器，如下：

过滤器名称	描述	例子
currency	money格式化	{{ p.price | currency}}
date	日期格式化 [orderDate为時間類型才行，不能是时间字符串]	{ p.orderDate | date : “dd MMM yyyy” }} 可以是| date : ‘yyyy年MM月dd日‘ {{ p.orderDate | date : “shortDate” }}
json	将JSON字符串生成一个JSON对象	<tr ng-repeat="p in products"> <td colspan="4">{{p | json}}</td> </tr>
number	格式化数值并给出精确度位数	{{ p.price | number : 0}}  {{ p.price | number : 2}}
uppercase lowercase	大小写转换	{{ p.city | lowercase }} {{ p.state | uppercase }}
limitTo	控制列表渲染数据。限制数组长度或字符串长度	<tr ng-repeat="p in products | limitTo:10">
orderBy	排序	<tr ng-repeat="p in products | orderBy : ‘name’”> For descending order <tr ng-repeat="p in products | orderBy : ‘-name’”>

 

filter(匹配子串)

这个名叫filter的filter（不得不说这名字起的，真让人容易混淆——！）

用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。下面举个例子说明一下参数的用法，我用现在特别火的几个孩子定义了一个数组：

$scope.childrenArray = [

    {name:‘kimi‘,age:3},

    {name:‘cindy‘,age:4},

    {name:‘anglar‘,age:4},

    {name:‘shitou‘,age:6},

    {name:‘tiantian‘,age:5}

  ];

$scope.func = function(e){return e.age>4;}

{{ childrenArray | filter : ‘a‘ }} //匹配属性值中含有a的

{{ childrenArray | filter : 4 }} //匹配属性值中含有4的

{{ childrenArray | filter : {name : ‘i‘} }} //参数是对象，匹配name属性中含有i的

{{childrenArray | filter : func }} //参数是函数，指定返回age>4的

 

自定义过滤器

AngularJS不仅仅支持内部自构建的过滤器，而且还可以自定义过滤器来满足我们所需，若自定义过滤器此时我们需要 通过module.filter来实现，实际上内部是通过FilterProvider来实现。module.filter这个方法有两个参数，一个是需要创建的过滤器的名称，另外一个是创建一个factory函数来使得该自定义过滤器生效或者工作。

接下来我们实现一个自定义过滤器，该过滤器带一个参数(reverse)，实现了再对照代码就明朗了。如下：

app.filter("properCase", function () {  
    return function (value, reverse) {  //value是需要使用过滤器的对象
        if (angular.isString(value)) {  
            var intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();  
   return (reverse == false ? intermediate[0].toLowerCase() :intermediate[0].toUpperCase()) 
+ intermediate.substr(1);  
        } else {  
            return value;  
        }  
    };  
});

View Code

接下来在视图中将绑定的名称和类别修改成如下：

value | filter:reverse

 <td>{{p.name | properCase}}</td>  //首字母大写

 <td>{{p.category | properCase : false}}</td>  //首字母小写

混合过滤器

当进行渲染数据时，有可能需要进行多次过滤此时我们就需要创建多个自定义过滤器或者内置过滤器和自定义过滤器混合使用。

<tr ng-repeat="p in products | orderBy :‘name‘ | skipRec:2">