AngularJS 过滤器 filter 用法完全解析

作者：键盘侠时间：2026-10-30 05:38:45浏览：125

本文全面解析 AngularJS 中 filter 过滤器的使用方法。涵盖在 HTML 模板与 JavaScript 代码中调用过滤器的两种方式，详细讲解 uppercase、lowercase、json、date、number、currency 等内置过滤器的参数传递与格式化技巧，以及 filter、limitTo、orderBy 对数组的处理。同时提供自定义过滤器的完整实现步骤与示例代码，帮助开发者高效处理数据展示与逻辑过滤。

AngularJS 过滤器概述与调用方式

在 AngularJS 框架中，filter（过滤器）提供了一种便捷的数据格式化手段。AngularJS 内置了多种常用的过滤器，同时开发者也可以轻松创建自定义过滤器以满足特定需求。

在 HTML 模板的双花括号表达式 {{}} 中，可以使用管道符号 | 来调用过滤器。例如，若希望将字符串转换为全大写形式显示，可以按如下方式使用：


{{ name | uppercase }}

AngularJS 过滤器概述与调用方式

此外，在 JavaScript 代码中，可以通过注入 $filter 服务来调用过滤器。仍以字符串大写转换为例，具体实现如下：


app.controller('DemoController', ['$scope', '$filter', 
 function($scope, $filter) {
 
  $scope.name = $filter('lowercase')('Ari');
}]);

向过滤器传递参数非常简单，只需在过滤器名称后添加冒号（:），随后跟上参数值。如果涉及多个参数，每个参数后均需添加冒号进行分隔。例如，number 过滤器可用于限制数字的小数位数，若需显示两位小数，可写作 number:2。


{{ 123.456789 | number:2 }}

内置过滤器的参数传递与数组处理

filter 过滤器的主要功能是对数组数据进行筛选，并返回一个包含符合条件元素的新数组。

在实际应用中，例如客户端搜索场景下，我们可以利用该功能快速从数组中筛选出目标结果。

该 filter 方法接收 string、object 或 function 类型的参数，用于指定筛选条件，从而选择或移除数组中的特定元素。

接下来我们将具体展开介绍各类过滤器的用法。

常用内置过滤器详解

一、内置过滤器 1. uppercase 与 lowercase：用于大小写转换。


{{ "lower cap string" | uppercase }}   //结果：LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //结果：tank is good

｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的2，json格式化


{{ {foo: "bar", baz: 23} | json }}  //结果：{ "foo": "bar", "baz": 23 }

需要注意的是，格式化前的数据可能不包含双引号，经过 json 格式化处理后，将转换为标准的 JSON 数据格式。

3. date：用于日期格式化。

例如，将 MySQL 时间戳转换为特定格式的时间字符串：ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"。


{{ 1304375948024 | date:'medium'}}   //May 03, 2011 06:39:08 PM 
{{ 1304375948024 | date }}             //结果：May 3, 2011 
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}   //结果：05/03/2011 @ 6:39AM 
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}  //结果：2011-05-03 06:39:08

4. number：用于数字格式化。


{{ 1.234567 | number:1 }}  //结果：1.2  
{{ 1234567 | number }}    //结果：1,234,567

5. currency：用于货币格式化。


{{ 250 | currency }}         //结果：$250.00  
{{ 250 | currency:"RMB ￥ " }}    //结果：RMB ￥ 250.00

6. filter：用于查找，仅能查询 value 值，无法直接查询 key。


{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:'s'}}  //查找含有有s的行 
 
//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:{'name':'ip'} }}  //查找name like ip的行 
//上例结果:[{"age":20,"id":10,"name":"iphone"}] 
 
$filter('number')(30000, 2); 
var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])

7. limitTo：用于截取字符串或对象数组。


{{ "i love tank" | limitTo:6 }}      //结果：i love 
{{ "i love tank" | limitTo:-4 }}     //结果：tank 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | limitTo:1 }}   //结果：[{"age":20,"id":10,"name":"iphone"}]

8. orderBy：用于对对象数组进行排序。


{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id':true }}    //根id降序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id' }}      //根据id升序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:['-age','name'] }}

自定义过滤器的实现与应用

二、自定义 filter 功能自定义过滤器的实现方式同样简单，只需使用 module 的 filter 方法，返回一个函数。该函数接收输入值，并返回处理后的结果。


app.filter('过滤器名称',function(){ 
  return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
    //...做一些事情  
    return 处理后的对象; 
  } 
});

本文基于一个基础的 AngularJS MVC 框架 phonecat 进行演示，该框架结构清晰，便于编写自定义 filter。在 filters.js 文件中添加一个 module 即可。


angular.module('tanktest', []).filter('tankreplace', function() { 
  return function(input) { 
    return input.replace(/tank/, "=====") 
  }; 
});

在 HTML 模板中调用自定义过滤器。


{{ "TANK is GOOD" | lowercase |tankreplace}}  //结果：===== is good

注意：管道符号 | 可以链式连接多个过滤器，例如 | lowercase | tankreplace。


yourApp.filter('orderObjectBy', function() { 
 return function(items, field, reverse) { 
  var filtered = []; 
  angular.forEach(items, function(item) { 
   filtered.push(item); 
  }); 
  filtered.sort(function (a, b) { 
   return (a[field] > b[field] ? 1 : -1); 
  }); 
  if(reverse) filtered.reverse(); 
  return filtered; 
 }; 
});

该过滤器将对象转换为标准数组，并通过指定字段进行排序。你可以使用 orderObjectBy 过滤器，类似于 ORDERBY，在字段名后添加布尔值以指定排序方向（false 为升序，true 为降序）。


<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>

实现排序与搜索功能。


<input type="text" ng-model="search" class="form-control" placeholder="Search"> 
<thead> 
  <tr> 
    <!-- ng-class="{dropup:true}" --> 
    <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}"> 
      产品编号 
      <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> 
      产品名称 
      <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"> 
      产品价格 
      <span ng-class="{orderColor: orderType === 'price'}" class="caret"></span> 
    </th> 
  </tr> 
</thead> 
<tbody> 
  <tr ng-repeat="item in productData | filter: search | orderBy:order + orderType"> 
    <td>{{item.id}}</td> 
    <td>{{item.name}}</td> 
    <td>{{item.price | currency: '￥'}}</td> 
  </tr> 
</tbody>

angularjs


//默认排序字段 
$scope.orderType = 'id'; 
 
$scope.order = '-'; 
 
$scope.changeOrder = function(type) { 
  console.log(type); 
  $scope.orderType = type; 
 
  if ($scope.order === '') { 
    $scope.order = '-'; 
  }else{ 
    $scope.order = ''; 
  } 
}

作者最新文章

免登录快速分享代码：适合面试协作的轻量级JS在线运行工具推荐

2026-11-05 14:45:59

JS空字符串和纯空格转浮点数的结果是什么

2026-11-05 11:04:42

JS在线格式化缩进混乱怎么办？配置项调整技巧

2026-11-04 23:27:25

JS怎么获取秒级时间戳

2026-11-03 21:45:29

JS时间戳怎么从毫秒转换为秒

2026-11-03 20:04:14