AngularJS过滤器实现动态搜索与排序功能示例
在Web应用开发中，动态搜索与排序是提升用户体验的核心功能之一，AngularJS作为经典的MVVM框架，其内置的过滤器（Filter）机制为数据筛选和排序提供了简洁高效的解决方案，本文将通过具体示例，详细介绍如何利用AngularJS过滤器实现动态搜索与排序功能，涵盖基础用法、自定义过滤器及性能优化等关键内容。
AngularJS过滤器基础
AngularJS过滤器主要用于格式化或过滤数据，通过在模板中使用管道符（）连接表达式和过滤器名称。{{ expression | filterName }}，内置过滤器如filter、orderBy和limitTo等，可直接满足基础的数据处理需求。
内置filter与orderBy过滤器
filter过滤器：支持根据字符串、对象或函数对数组进行筛选。orderBy过滤器：可按指定字段或自定义逻辑对数组进行升序或降序排列。
以下为简单示例：
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="searchText" placeholder="搜索...">
<ul>
<li ng-repeat="user in users | filter:searchText | orderBy:'name'">
{{ user.name }} - {{ user.age }}
</li>
</ul>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [
{name: 'Alice', age: 25},
{name: 'Bob', age: 30},
{name: 'Charlie', age: 22}
];
});
上述代码中，filter:searchText实现实时搜索，orderBy:'name'按姓名排序。
动态搜索功能实现
动态搜索通常结合ng-model和filter过滤器实现，通过输入框绑定模型变量，过滤器实时监听变量变化并更新视图。
多字段搜索
若需对多个字段（如姓名、年龄）进行搜索，可通过自定义过滤器实现：
app.filter('multiFieldFilter', function() {
return function(items, search) {
if (!search) return items;
var match = new RegExp(search, 'i');
return items.filter(function(item) {
return match.test(item.name) || match.test(item.age);
});
};
});
在模板中使用：
<input ng-model="searchText">
<ul>
<li ng-repeat="user in users | multiFieldFilter:searchText">
{{ user.name }} - {{ user.age }}
</li>
</ul>
对象属性搜索
当数据为嵌套对象时，可递归遍历属性：
app.filter('deepFilter', function() {
return function(items, search) {
if (!search) return items;
return items.filter(function(item) {
return Object.keys(item).some(function(key) {
return String(item[key]).includes(search);
});
});
};
});
动态排序功能实现
排序功能可通过orderBy过滤器结合按钮点击事件实现动态切换。
单字段排序
<button ng-click="sortField = 'name'; reverse = !reverse">按姓名排序</button>
<button ng-click="sortField = 'age'; reverse = !reverse">按年龄排序</button>
<ul>
<li ng-repeat="user in users | orderBy:sortField:reverse">
{{ user.name }} - {{ user.age }}
</li>
</ul>
$scope.sortField = 'name'; $scope.reverse = false;
多字段排序
若需按多个字段排序（如先按年龄，再按姓名），可传入数组：
<li ng-repeat="user in users | orderBy:['age', 'name']:reverse">
{{ user.name }} - {{ user.age }}
</li>
性能优化与注意事项
大数据量处理
当数据量较大时，频繁的过滤和排序可能导致性能问题，可通过以下方式优化：
- 分页：结合
limitTo和startFrom指令实现分页显示。 - 虚拟滚动：仅渲染可视区域内的数据（如使用
ng-virtual-scroll库）。
过滤器缓存
AngularJS默认不缓存过滤器结果，可通过$cacheFactory手动缓存：
app.filter('cachedFilter', function($cacheFactory) {
var cache = $cacheFactory('filterCache');
return function(items, search) {
var key = search || 'all';
if (cache.get(key)) return cache.get(key);
var result = items.filter(/* 过滤逻辑 */);
cache.put(key, result);
return result;
};
});
过滤器与track by
在ng-repeat中使用track by提升渲染性能：
<li ng-repeat="user in filteredUsers = (users | filter:searchText) track by user.id">
{{ user.name }}
</li>
完整示例
以下为整合搜索与排序的完整代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.container { max-width: 600px; margin: 20px; }
input, button { padding: 8px; margin: 5px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { cursor: pointer; background-color: #f2f2f2; }
</style>
</head>
<body>
<div class="container" ng-controller="myCtrl">
<input type="text" ng-model="searchText" placeholder="搜索姓名或年龄">
<table>
<tr>
<th ng-click="sort('name')">姓名 <span ng-show="sortField === 'name'">{{ reverse ? '↑' : '↓' }}</span></th>
<th ng-click="sort('age')">年龄 <span ng-show="sortField === 'age'">{{ reverse ? '↑' : '↓' }}</span></th>
</tr>
<tr ng-repeat="user in filteredUsers = (users | filter:searchText | orderBy:sortField:reverse) track by user.id">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [
{id: 1, name: 'Alice', age: 25},
{id: 2, name: 'Bob', age: 30},
{id: 3, name: 'Charlie', age: 22}
];
$scope.sortField = 'name';
$scope.reverse = false;
$scope.sort = function(field) {
if ($scope.sortField === field) {
$scope.reverse = !$scope.reverse;
} else {
$scope.sortField = field;
$scope.reverse = false;
}
};
});
</script>
</body>
</html>
AngularJS过滤器通过声明式语法简化了动态搜索与排序的实现，合理利用内置过滤器、自定义逻辑及性能优化技巧，可高效构建响应式数据交互界面，尽管AngularJS已逐渐被Angular等现代框架取代,但其过滤器的设计思想仍对前端开发具有重要参考价值。
