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，表示这个元素应该被渲染到页面上。
对象过滤
对象过滤是一种更加高级的过滤方式，可以根据多个条件来过滤数组中的元素。例如，我们有一个数组：
$scope.items = [
{name: 'apple', price: 1.25, category: 'fruit'},
{name: 'banana', price: 0.75, category: 'fruit'},
{name: 'orange', price: 0.50, category: 'fruit'},
{name: 'pear', price: 1.00, category: 'fruit'},
{name: 'carrot', price: 0.25, category: 'vegetable'},
{name: 'celery', price: 0.50, category: 'vegetable'},
{name: 'lettuce', price: 0.75, category: 'vegetable'}
];我们可以使用 filter 指令来对这个数组进行过滤：
<input type="text" ng-model="search">
<select ng-model="category">
<option value="">All Categories</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
<div ng-repeat="item in items | filter:{name: search, category: category}">
{{ item.name }} - ${{ item.price }} - {{ item.category }}
</div>在上面的例子中，我们使用 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 过滤器来实现过滤逻辑：
app.filter('myFilter', function() {
return function(items, search) {
var result = [];
angular.forEach(items, function(item) {
if (item.name.indexOf(search) !== -1) {
result.push(item);
}
});
return result;
};
});在上面的例子中，我们定义了一个名为 myFilter 的过滤器，它的参数是 items 和 search。当数组中的元素的名称包含 search 时，将这个元素加入到结果数组中。
多重过滤
多重过滤可以让我们根据多个条件来过滤数组中的元素。例如，我们有一个数组：
$scope.items = [
{name: 'apple', price: 1.25, category: 'fruit'},
{name: 'banana', price: 0.75, category: 'fruit'},
{name: 'orange', price: 0.50, category: 'fruit'},
{name: 'pear', price: 1.00, category: 'fruit'},
{name: 'carrot', price: 0.25, category: 'vegetable'},
{name: 'celery', price: 0.50, category: 'vegetable'},
{name: 'lettuce', price: 0.75, category: 'vegetable'}
];我们可以使用 filter 指令来对这个数组进行过滤：
<input type="text" ng-model="search">
<select ng-model="category">
<option value="">All Categories</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
<div ng-repeat="item in items | myMultiFilter:{name: search, category: category}">
{{ item.name }} - ${{ item.price }} - {{ item.category }}
</div>然后我们定义一个 myMultiFilter 过滤器来实现过滤逻辑：
app.filter('myMultiFilter', function() {
return function(items, filters) {
var result = [];
angular.forEach(items, function(item) {
var flag = true;
angular.forEach(filters, function(value, key) {
if (key === 'name') {
if (item.name.indexOf(value) === -1) {
flag = false;
}
} else if (key === 'category') {
if (value !== '' && item.category !== value) {
flag = false;
}
}
});
if (flag) {
result.push(item);
}
});
return result;
};
});在上面的例子中，我们定义了一个名为 myMultiFilter 的过滤器，它的参数是 items 和 filters。当数组中的元素的名称包含 filters.name，并且分类等于 filters.category 时，将这个元素加入到结果数组中。
总结
filter 指令是 AngularJS 中非常实用的一个指令，可以用来对数组进行过滤和排序。本文介绍了 filter 指令的基本用法和高级用法，包括字符串过滤、函数过滤、对象过滤、自定义过滤器和多重过滤。希望本文能够帮助读者更好地理解和运用 AngularJS 中的 filter 指令。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a7603eb4cecbf2dfa33ae