在AngularJS中，过滤器(Filter)是一种通用的技术，可以用来对数组和对象数据进行筛选和排序。过滤器不仅提供了方便的API来处理数据，而且还能够将数据分离出来，减少代码中的耦合性和复杂度。
基本概念
在AngularJS中，过滤器是通过管道(Pipe)符号(|)来实现的。我们可以将需要处理的数据放在管道符号的左侧，然后在右侧添加过滤器名称和过滤器的参数。比如：
-- ---- - ---------------- --
在上面的代码中，data是需要处理的数据，filter是过滤器名称，arg1和arg2是过滤器的参数。
使用过滤器
AngularJS中提供了很多内置的过滤器，比如filter、orderBy、limitTo等等。我们可以直接使用这些过滤器来处理数据。
filter过滤器
filter过滤器可以用来按照指定的条件进行数据筛选。比如，我们有一个列表数据，需要筛选出其中含有'Angular'关键字的项，可以使用如下代码：
---- --- --------------- -- ----- - -------------------- ---- ------- -----
上面的代码中，ng-repeat是AngularJS的重要指令，与for循环类似，用来遍历数据并渲染HTML。items是数据列表，filter:'Angular'表示按照'Angular'关键字进行筛选。
orderBy过滤器
orderBy过滤器可以用来按照指定的字段进行数据排序。比如，我们有一个学生成绩数据列表，需要按照分数进行降序排列，可以使用如下代码：
-------
--- --------------- -- ----- - ------------------
------ --------- -------
------ ---------- -------
-----
--------上面的代码中，-score表示按照分数字段(score)进行降序排列。
limitTo过滤器
limitTo过滤器可以用来限制输出列表的长度。比如，我们有一个文章列表，需要只显示前5篇文章，可以使用如下代码：
---- --- --------------- -- ----- - ------------- ---- ------- -----
上面的代码中，limitTo:5表示限制输出结果最多只显示5个条目。
自定义过滤器
除了内置的过滤器，我们也可以自定义过滤器来满足特定的需求。自定义过滤器通常包含两个部分：过滤器名称和处理函数。
定义过滤器
定义过滤器可以通过$filterProvider服务来实现，语法如下：
-------------------------------------- ---------- -
------ --------------- -
-- -------
------ -------
-
---上面的代码中，filterName是过滤器名称，function()是过滤器的处理函数。
使用过滤器
使用自定义的过滤器和内置的过滤器使用方式相同。比如，我们有一个需要将日期格式化的需求，可以定义一个名为dateFormat的过滤器，并使用如下代码：
----- ---- - ---------------------- --------- ------
总结
过滤器是AngularJS中非常重要的技术，可以用来对数据进行筛选、排序、限制输出等等操作。熟练的使用过滤器，能够提高代码的复用度和可维护性。自定义过滤器则可以解决更复杂的问题，提高代码的可扩展性。在开发过程中，我们需要根据实际需求灵活使用过滤器，并避免滥用过滤器导致性能问题。
示例代码
接下来，我们看一下如何利用过滤器在AngularJS中实现数据筛选和排序。
------
------
----- ----------------
-----------------------------
------- -----------------------------------------------------------------------
-------
----- ---------------
---- -----------------------
-----------------------
------------
------- ----- - ---- --------
------------------------
----
--- --------------- -- ----- - -------------------- ---- -------
-----
----------------
-------
----
-----------
-----------
-----
--- --------------- -- ------ - ------------------
------ --------- -------
------ ---------- -------
-----
--------
-----------------------
----
--- --------------- -- ----- - ------------- ---- -------
-----
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -
------- ------ ------------- ------------ -------- ------ ---------
--
------------- - -
- ----- ----- ------ -- --
- ----- ----- ------ -- --
- ----- ----- ------ -- --
- ----- ----- ------ -- -
--
---
---------
-------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65911d2ceb4cecbf2d658f3f