过滤器是 Angular.js 中一个非常重要的概念，它可以让我们轻松实现数据的格式化、排序、过滤等功能。本文将详细介绍 Angular.js 中的过滤器，包括内置过滤器和自定义过滤器，在学习过程中，我们将利用实例代码进行演示，帮助读者更好地了解过滤器的用途和实现方式。
内置过滤器
Angular.js 内置了一些常见的过滤器，我们可以直接在模板中使用它们。下面我们会针对一些常见的过滤器进行介绍和演示。
currency 过滤器
currency 过滤器用于格式化数字为货币格式，它将数字转换为字符串，将其格式化为指定货币单位的格式。该过滤器的使用方式如下：
{{ money | currency }}其中，money 表示要格式化的数字，currency 表示过滤器名称。这里我们只使用了过滤器的默认设置，如果需要设置货币符号、数字位数、千位分隔符等选项，我们可以在过滤器中传入对应参数进行设置。
filter 过滤器
filter 过滤器可以用于对数组进行过滤，它可以根据用户输入的条件，对数组中的元素进行筛选，返回所有满足条件的元素。该过滤器的使用方式如下：
<div ng-repeat="item in items | filter: keyword">
{{ item.name }}
</div>其中，items 表示要进行过滤的数组，keyword 表示用户输入的过滤条件。
orderBy 过滤器
orderBy 过滤器用于对数组进行排序，它可以根据指定的排序条件，对数组中的元素进行排序。该过滤器的使用方式如下：
<div ng-repeat="item in items | orderBy: 'age'">
{{ item.name }}
</div>其中，items 表示要进行排序的数组，age 表示要排序的属性。我们可以根据需要，设置升序或降序，例如：
<div ng-repeat="item in items | orderBy: '-age'">
{{ item.name }}
</div>这里我们添加了一个负号，表示降序排列。
自定义过滤器
除了内置过滤器外，我们也可以自定义过滤器，以满足特殊的需求。自定义过滤器通常有两种方式：在模块中注册过滤器、在控制器中注册过滤器。
在模块中注册过滤器
在模块中注册过滤器可以让我们在整个应用中共享该过滤器。我们可以通过调用模块的 filter 方法来注册过滤器：
angular.module('myApp', []).filter('myFilter', function() {
return function(input, arg) {
// 过滤器实现逻辑
};
});这里，'myApp' 表示模块名称，myFilter 表示过滤器名称，function(input, arg) 表示过滤器实现的函数，其中 input 表示要过滤的数据，arg 表示过滤器的参数。我们可以根据需要，对数据进行格式化、排序、过滤等操作。
在控制器中注册过滤器
在控制器中注册过滤器可以让我们在该控制器的作用域内使用该过滤器。我们可以通过将过滤器函数赋值给作用域的变量来注册过滤器：
angular.module('myApp', []).controller('myController', function($scope) {
$scope.myFilter = function(input, arg) {
// 过滤器实现逻辑
};
});这里，$scope 表示控制器的作用域，myFilter 表示过滤器名称，function(input, arg) 表示过滤器实现的函数，其中 input 表示要过滤的数据，arg 表示过滤器的参数。我们可以根据需要，对数据进行格式化、排序、过滤等操作。
示例代码
下面提供一个例子，演示了 filter 和 orderBy 过滤器的使用，以及如何自定义过滤器：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- -------------
------- ---------------------------------------------------------------------------------
-------
----- -------------- -----------------------------
-------------- ----------
----- ------ ---------------
------ ----------- ------------------ ---------------------
----
--- --------------- -- ----- - ------- ----------- --------- -------
-----
----- ------- ---------------
----
--- --------------- -- ----- - -------- --------- --------- -- - -- -------- -------
-----
-------------
------ ----------- --------------- --------------------
----- ---- - ------------ ------
--------
----------------------- ---
--------------------------- ---------------- -
------------ - -
- ----- ----- ---- -- --
- ----- ----- ---- -- --
- ----- ----- ---- -- --
- ----- ----- ---- -- --
--
------------------- - --------------- -
--- ---- - --- ------------
--- ---- - -------------------
--- ----- - --------------- - --
--- --- - ---------------
------ ---- - --- - ----- - --- - --- - ----
--
---
---------
-------
-------在这个例子中，我们演示了如何使用 filter 和 orderBy 过滤器对数组进行过滤和排序。我们还通过自定义过滤器来将日期字符串转换为更友好的格式。在自定义过滤器中，我们首先将字符串转换为 Date 对象，然后根据需要将其转换为指定格式的字符串。这个例子虽然简单，但是它充分体现了 Angular.js 中过滤器的强大和灵活性。
总结
本文详细介绍了 Angular.js 中的过滤器，包括内置过滤器和自定义过滤器。通过实例代码的演示，我们了解了过滤器的基本使用方式和常见应用场景。希望读者在学习过滤器时，能够掌握过滤器的使用方法和实现原理，并能够灵活应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450c353980a9b385b9af078