AngularJS 过滤器 filter 用法详解：内置与自定义

AngularJS 过滤器 filter 用法详解：内置与自定义

本文汇总了 AngularJS 中 filter 过滤器的具体用法，供读者参考学习。

引言

引言

过滤器（filter）的概念类似于现实生活中的过滤装置，其核心功能是接收输入值，依据特定规则进行处理后输出结果。例如，将数字转换为货币格式。AngularJS 提供了简洁的过滤器机制，主要分为内置过滤器和自定义过滤器两类，下文将逐一介绍。

内置过滤器

内置过滤器

AngularJS 内置了九种常用过滤器，分别为：currency（货币）、date（日期）、filter（子串匹配）、json（JSON 格式化）、limitTo（限制数量）、lowercase（小写转换）、uppercase（大写转换）、number（数字格式化）以及 orderBy（排序）。此外，开发者还可根据需求自定义过滤器，以应对更复杂的数据处理场景。以下将详细介绍各过滤器的使用方法。

1. currency（货币处理）

1. currency（货币处理）

currency 过滤器用于将数字格式化为货币字符串，默认显示美元符号。用户可传入自定义符号，例如设置为人民币符号。

{{num | currency : '￥'}}

2. date（日期格式化）

2. date（日期格式化）

原生 JavaScript 对日期的格式化支持有限，而 AngularJS 提供的 date 过滤器可满足大多数常规格式化需求。具体用法如下：

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

参数用于指定格式，y、M、d、h、m、s、E 分别代表年、月、日、时、分、秒和星期，用户可自由组合这些字符。通过调整字符数量可控制格式化后的位数。此外，AngularJS 还提供了一些预定义的描述性字符串，如“shortTime”可将时间格式化为“12:05 pm”的形式。虽然 AngularJS 提供了八种此类字符串，但开发者完全可以根据需要自行组合格式，无需记忆所有预设单词。

3. filter（匹配子串）

3. 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的

4. json（格式化 JSON 对象）

4. json（格式化 JSON 对象）

json 过滤器可将 JavaScript 对象格式化为 JSON 字符串，该过滤器无需参数。虽然页面直接输出 JSON 字符串的场景较少，但官方指出其适用于调试目的，这是一个不错的选择。此外，在 JavaScript 代码中使用该过滤器的作用等同于 JSON.stringify()，用法十分简单：

{{ jsonTest | json}}

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

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

limitTo 过滤器用于截取数组或字符串，接收一个参数指定截取长度。若参数为负值，则从数组或字符串尾部开始截取。该过滤器功能较为有限，仅支持从头或尾部截取，且原生 JavaScript 函数即可实现类似功能。具体用法如下：

{{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项

6. lowercase（小写转换）

6. lowercase（小写转换）

该过滤器将数据转换为全部小写形式。功能较为简单，无需过多解释。同样，由于功能单一且无参数，仅能将整个字符串转为小写，无法指定特定字母，因此实用性相对较低。

7. uppercase（大写转换）

7. uppercase（大写转换）

用法与 lowercase 类似，将数据转换为全部大写。

8. number（数字格式化）

8. number（数字格式化）

number 过滤器可为数字添加千位分隔符，例如显示为“123,456,789”。该过滤器接收一个可选参数，用于指定浮点数保留的小数位数：

{{ num | number : 2 }}

9. orderBy（排序）

9. orderBy（排序）

orderBy 过滤器用于对数组元素进行排序，接收一个参数指定排序规则。参数可以是字符串，表示按该属性名称排序；可以是函数，用于定义排序逻辑；也可以是数组，表示按数组中指定的多个属性依次排序（若第一项值相等，则比较第二项）。继续使用前述儿童数组示例：

<div>{{ childrenArray | orderBy : 'age' }}</div>   //按age属性值进行排序，若是-age，则倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div>  //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name进行排序

内置过滤器介绍完毕。如前所述，AngularJS 内置过滤器并非万能，部分功能显得较为鸡肋。对于更个性化的数据处理需求，开发者需要定义自定义过滤器。

自定义过滤器

自定义过滤器

开发者需借助模块中的 filter 方法定义函数。该函数接收输入值，经过处理后返回期望结果。以下示例演示如何返回数组中下标为奇数的元素：

app.filter('odditems',function(){
  return function(inputArray){
    var array = [];
    for(var i=0;i<inputArray.length;i++){
      if(i%2!==0){
        array.push(inputArray[i]);
      }
    }
    return array;
  }
});

自定义过滤器的结构如上所示，处理逻辑编写在内部的闭包函数中。若需让过滤器接收参数，可在 return 的函数中定义第二个参数，甚至更多参数。

过滤器的两种用法

过滤器的两种用法

1、在模板中使用 filter

开发者可直接在 {{}} 表达式中使用 filter，通过 | 符号与表达式分隔，语法如下：

{{ expression | filter }}

支持多个 filter 连用，前一个 filter 的输出将作为下一个 filter 的输入（因其形态类似管道，故得名）。

{{ expression | filter1 | filter2 | ... }}

filter 可接收参数，参数之间使用 : 分隔，示例如下：

{{ expression | filter:argument1:argument2:... }}

除了对 {{}} 中的数据进行格式化，filter 还可用于指令中。例如，先对数组 array 进行过滤处理，然后：

循环输出结果：

<span ng-repeat="a in array | filter ">

2. 在 Controller 和 Service 中使用 filter

JavaScript 代码中同样可以使用过滤器，方式是通过依赖注入。例如，在 Controller 中使用 currency 过滤器，只需将其注入该 Controller 即可，代码如下：

app.controller('testC',function($scope,currencyFilter){
  $scope.num = currencyFilter(123534);
}

在模板中使用 {{num}} 即可直接输出格式化后的货币值“$123,534.00”。在 Service 中使用 filter 的原理相同。

此时读者可能会疑惑，若需在 Controller 中使用多个 filter，是否需逐一注入？这确实较为繁琐。AngularJS 提供了 $filter 服务来解决这一问题，只需注入一个 $filter 即可调用所需的各种 filter，使用方法如下：

app.controller('testC',function($scope,$filter){
  $scope.num = $filter('currency')(123534);
  $scope.date = $filter('date')(new Date(),"yyyy-MM-dd hh:mm:ss EEEE");
}

此方法可达到相同效果，且便于灵活调用不同的 filter。

小结

小结

以上介绍了 AngularJS 中过滤器的基本用法，内容均较为简单。通过整理归纳，有助于加深印象。学习 filter 并无难点，后续可直接查阅相关文档获取详细信息。

更多关于 AngularJS 内容的读者可查看本站专题：《AngularJS 入门与进阶教程》及《AngularJS MVC 架构总结》

希望本文所述的 AngularJS 程序设计知识对大家有所帮助。