AngularJS 是一个流行的前端框架，它提供了许多有用的指令来简化前端开发。其中，filter 指令是一个非常实用的指令，可以用来对数据进行过滤和排序。本文将详细介绍 AngularJS 中 filter 指令的使用方法，并提供示例代码和学习指导。
filter 指令的基本用法
filter 指令可以用在 ng-repeat 指令中，用来对数组进行过滤和排序。它的基本语法如下：
<div ng-repeat="item in items | filter:expression"></div>
其中，items 是一个数组，expression 是一个过滤表达式。这个表达式可以是一个字符串、一个函数、或者一个对象。
字符串过滤
字符串过滤是最常用的过滤方式，可以根据输入的关键字来过滤数组中的元素。例如，我们有一个数组：
$scope.items = [
{name: 'apple', price: 1.25},
{name: 'banana', price: 0.75},
{name: 'orange', price: 0.50},
{name: 'pear', price: 1.00}
];我们可以使用 filter 指令来对这个数组进行过滤：
<input type="text" ng-model="search">
<div ng-repeat="item in items | filter:search">
{{ item.name }} - ${{ item.price }}
</div>在上面的例子中，我们使用 ng-model 指令来绑定输入框的值到 $scope.search 变量上。然后我们使用 filter 指令来过滤 items 数组，将符合条件的元素渲染到页面上。
函数过滤
函数过滤是一种更加灵活的过滤方式，可以根据自定义逻辑来过滤数组中的元素。例如，我们有一个数组：
$scope.items = [
{name: 'apple', price: 1.25},
{name: 'banana', price: 0.75},
{name: 'orange', price: 0.50},
{name: 'pear', price: 1.00}
];我们可以使用 filter 指令来对这个数组进行过滤：
<div ng-repeat="item in items | filter:filterFunction">
{{ item.name }} - ${{ item.price }}
</div>然后我们定义一个 filterFunction 函数来实现过滤逻辑：
$scope.filterFunction = function(item) {
return item.price > 1.00;
};在上面的例子中，我们定义了一个 filterFunction 函数，它的参数是数组中的每个元素。当 item.price 大于 1.00 时，返回 true，表示这个元素应该被渲染到页面上。
对象过滤
对象过滤是一种更加高级的过滤方式，可以根据多个条件来过滤数组中的元素。例如，我们有一个数组：
-- -------------------- ---- -------
------------ - -
------ -------- ------ ----- --------- ---------
------ --------- ------ ----- --------- ---------
------ --------- ------ ----- --------- ---------
------ ------- ------ ----- --------- ---------
------ --------- ------ ----- --------- -------------
------ --------- ------ ----- --------- -------------
------ ---------- ------ ----- --------- ------------
--我们可以使用 filter 指令来对这个数组进行过滤：
-- -------------------- ---- -------
------ ----------- ------------------
------- --------------------
------- ------------ -------------------
------- ----------------------------
------- ------------------------------------
---------
---- --------------- -- ----- - ------------- ------- --------- -----------
-- --------- -- - --- ---------- -- - -- ------------- --
------在上面的例子中，我们使用 ng-model 指令来绑定输入框和下拉框的值到 $scope.search 和 $scope.category 变量上。然后我们使用 filter 指令来过滤 items 数组，将符合条件的元素渲染到页面上。我们使用一个对象来指定多个过滤条件，name 表示名称中包含输入框中的关键字，category 表示分类等于下拉框中选中的值。
filter 指令的高级用法
除了基本用法之外，filter 指令还提供了一些高级用法，可以进一步优化过滤和排序的效果。
自定义过滤器
自定义过滤器可以让我们根据自己的需求来定制过滤逻辑。例如，我们有一个数组：
$scope.items = [
{name: 'apple', price: 1.25},
{name: 'banana', price: 0.75},
{name: 'orange', price: 0.50},
{name: 'pear', price: 1.00}
];我们可以使用 filter 指令来对这个数组进行过滤：
<input type="text" ng-model="search">
<div ng-repeat="item in items | myFilter:search">
{{ item.name }} - ${{ item.price }}
</div>然后我们定义一个 myFilter 过滤器来实现过滤逻辑：
-- -------------------- ---- -------
---------------------- ---------- -
------ --------------- ------- -
--- ------ - ---
---------------------- -------------- -
-- -------------------------- --- --- -
------------------
-
---
------ -------
--
---在上面的例子中，我们定义了一个名为 myFilter 的过滤器，它的参数是 items 和 search。当数组中的元素的名称包含 search 时，将这个元素加入到结果数组中。
多重过滤
多重过滤可以让我们根据多个条件来过滤数组中的元素。例如，我们有一个数组：
-- -------------------- ---- -------
------------ - -
------ -------- ------ ----- --------- ---------
------ --------- ------ ----- --------- ---------
------ --------- ------ ----- --------- ---------
------ ------- ------ ----- --------- ---------
------ --------- ------ ----- --------- -------------
------ --------- ------ ----- --------- -------------
------ ---------- ------ ----- --------- ------------
--我们可以使用 filter 指令来对这个数组进行过滤：
-- -------------------- ---- -------
------ ----------- ------------------
------- --------------------
------- ------------ -------------------
------- ----------------------------
------- ------------------------------------
---------
---- --------------- -- ----- - -------------------- ------- --------- -----------
-- --------- -- - --- ---------- -- - -- ------------- --
------然后我们定义一个 myMultiFilter 过滤器来实现过滤逻辑：
-- -------------------- ---- -------
--------------------------- ---------- -
------ --------------- -------- -
--- ------ - ---
---------------------- -------------- -
--- ---- - -----
------------------------ --------------- ---- -
-- ---- --- ------- -
-- ------------------------- --- --- -
---- - ------
-
- ---- -- ---- --- ----------- -
-- ------ --- -- -- ------------- --- ------ -
---- - ------
-
-
---
-- ------ -
------------------
-
---
------ -------
--
---在上面的例子中，我们定义了一个名为 myMultiFilter 的过滤器，它的参数是 items 和 filters。当数组中的元素的名称包含 filters.name，并且分类等于 filters.category 时，将这个元素加入到结果数组中。
总结
filter 指令是 AngularJS 中非常实用的一个指令，可以用来对数组进行过滤和排序。本文介绍了 filter 指令的基本用法和高级用法，包括字符串过滤、函数过滤、对象过滤、自定义过滤器和多重过滤。希望本文能够帮助读者更好地理解和运用 AngularJS 中的 filter 指令。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a7603eb4cecbf2dfa33ae