AngularJS 是一个流行的前端框架，提供了丰富的服务来简化前端开发。其中，$filter 服务是一个非常有用的服务，可以帮助我们对数组进行排序和过滤。在本文中，我们将学习如何使用 $filter 服务来操作数组。
$filter 服务的基本用法
$filter 服务允许我们在控制器、指令或模板中使用内置的过滤器，也可以创建自定义过滤器。我们可以通过依赖注入的方式在控制器或指令中使用 $filter 服务，如下所示：
app.controller('MyController', ['$scope', '$filter', function($scope, $filter) {
// ...
}]);$filter 服务的基本用法非常简单。假设我们有一个数组，我们可以使用 $filter 服务的 filter() 方法来对其进行过滤。例如，我们可以按照关键词来过滤一个动态数组，如下所示：
-- -------------------- ---- ------- -------------- - -- ----- -------- ---- --- ------- -------- -- - ----- ------ ---- --- ------- ------ -- - ----- ---------- ---- --- ------- ------ --- -------------- - --- ------------------ - ---------- - -------------------- - --------------------------------- ---------------- --
在上面的代码中，我们定义了一个 $scope.myArray 数组，和一个 $scope.keyword 字符串，表示要过滤的关键词。然后我们在控制器中定义了一个 $scope.filterArray() 方法，用于调用 $filter 服务的 filter() 方法对数组进行过滤。最后，我们使用 ng-repeat 指令将过滤后的结果渲染到页面上。
<input type="text" ng-model="keyword" ng-change="filterArray()" placeholder="Search...">
<ul>
<li ng-repeat="item in filteredArray">{{item.name}}, {{item.age}}, {{item.gender}}</li>
</ul>上面的代码渲染了一个包含一个输入框和一个列表的页面。当我们输入关键词并点击搜索按钮时，代码会自动进行过滤，只显示符合条件的项。
数组的排序
除了过滤，$filter 服务还可以帮助我们对数组进行排序。下面是使用 $filter 服务的 orderBy() 方法对数组进行排序的示例代码：
-- -------------------- ---- ------- -------------- - -- ----- -------- ---- --- ------- -------- -- - ----- ------ ---- --- ------- ------ -- - ----- ---------- ---- --- ------- ------ --- ------------- - ------- -------------- - ------ ---------------- - ---------- - -------------- - ---------------------------------- -------------- ---------------- --
在上面的代码中，我们定义了一个 $scope.myArray 数组，和两个控制排序的变量 $scope.sortBy 和 $scope.reverse。然后我们在控制器中定义了一个 $scope.sortArray() 方法，用于调用 $filter 服务的 orderBy() 方法对数组进行排序。最后，我们使用 ng-repeat 指令将排序后的结果渲染到页面上。
<button ng-click="sortArray()">Sort by {{sortBy}}</button>
<ul>
<li ng-repeat="item in myArray">{{item.name}}, {{item.age}}, {{item.gender}}</li>
</ul>上面的代码渲染了一个包含一个排序按钮和一个列表的页面。当我们点击排序按钮时，代码会自动进行排序，按照指定的属性进行升序或者降序排序。
自定义过滤器
除了内置的过滤器，我们还可以创建自定义的过滤器。下面是一个将字符串转为大写的过滤器的示例代码：
app.filter('uppercase', function() {
return function(input) {
return input.toUpperCase();
};
});在上面的代码中，我们使用 app.filter() 方法创建了一个名为 uppercase 的过滤器，并使用函数返回值对输入进行处理。然后我们就可以在模板中使用这个过滤器了：
<p>{{name | uppercase}}</p>上面的代码将会将 name 变量的值转换为大写，并显示在页面上。
总结
在本文中，我们学习了如何使用 $filter 服务对数组进行排序和过滤，以及如何创建自定义过滤器。$filter 服务是一个非常有用和强大的服务，能够帮助我们更方便地操作数组和其他数据。如果你想深入了解 AngularJS，强烈推荐学习官方文档和相关教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdd421b5eee0b5255c4d63