AngularJS如何实现分页与搜索功能的完整代码示例？

AngularJS实现分页和搜索功能

在Web应用开发中,分页和搜索是数据展示的常见需求，AngularJS作为一款流行的前端框架，通过其双向数据绑定、模块化和依赖载入等特性，能够高效地实现这两个功能，本文将详细介绍如何使用AngularJS构建一个完整的分页与搜索解决方案，包括数据模型设计、控制器逻辑、视图模板以及性能优化技巧。

数据模型与依赖准备

我们需要在AngularJS应用中定义数据模型和必要的依赖,假设我们有一个包含大量数据的数组，例如产品列表，并希望实现基于关键词的搜索和分页显示，以下是基础代码结构：

var app = angular.module('myApp', []); app.controller('DataController', function($scope, $filter) { // 模拟数据源 $scope.allItems = [ {id: 1, name: '产品A', category: '电子产品'}, {id: 2, name: '产品B', category: '家居用品'}, // 更多数据... ]; // 初始化搜索关键词和分页参数 $scope.searchText = ''; $scope.currentPage = 1; $itemsPerPage = 5; // 每页显示条数 });

这里,$scope.allItems存储所有原始数据，searchText用于绑定搜索框的输入值，currentPage和itemsPerPage控制分页逻辑。

搜索功能的实现

搜索功能通常通过过滤数据实现,我们可以利用AngularJS的filter服务或自定义过滤函数，以下是两种实现方式：

使用内置filter服务

在视图中直接通过filter指令过滤数据：

自定义过滤函数

在控制器中编写过滤逻辑，避免在视图中进行复杂计算：

$scope.filteredItems = $filter('filter')($scope.allItems, $scope.searchText);

分页逻辑的实现

分页需要计算总页数、生成分页控件，并处理页码切换，以下是关键步骤：

计算总页数

$scope.totalItems = $scope.allItems.length; $scope.totalPages = Math.ceil($scope.totalItems / $scope.itemsPerPage);

分页控件模板

使用ng-repeat生成分页按钮，并高亮当前页：

<div class="pagination"> <button ng-disabled="currentPage == 1" ng-click="currentPage = currentPage - 1">上一页</button> <span ng-repeat="page in totalPages track by $index"> <button ng-class="{active: currentPage == $index + 1}" ng-click="currentPage = $index + 1">{{$index + 1}}</button> </span> <button ng-disabled="currentPage == totalPages" ng-click="currentPage = currentPage + 1">下一页</button> </div>

数据分页显示

通过limitTo和startFrom过滤器截取当前页数据：

<table> <tr ng-repeat="item in filteredItems | startFrom: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.category}}</td> </tr> </table>

性能优化与用户体验

当数据量较大时,频繁的过滤和分页计算可能导致性能问题，以下是优化建议：

使用$watch监听搜索变化

仅在用户停止输入后执行过滤，避免频繁触发：

$scope.$watch('searchText', function(newVal, oldVal) { if (newVal !== oldVal) { $timeout.cancel($scope.searchTimeout); $scope.searchTimeout = $timeout(function() { $scope.filteredItems = $filter('filter')($scope.allItems, newVal); $scope.currentPage = 1; // 重置到第一页 }, 300); // 延迟300ms } });

分页控件样式优化

通过CSS美化分页按钮，提升用户体验：

.pagination button { margin: 0 5px; padding: 5px 10px; border: 1px solid #ccc; cursor: pointer; } .pagination button.active { background: #007bff; color: white; }

完整示例与数据表格

以下是一个完整的分页与搜索功能示例,包含数据表格展示：

<div ng-app="myApp" ng-controller="DataController"> <h3>产品列表</h3> <input type="text" ng-model="searchText" placeholder="搜索产品..."> <table border="1"> <thead> <tr> <th>ID</th> <th>名称</th> <th>分类</th> </tr> </thead> <tbody> <tr ng-repeat="item in filteredItems = (allItems | filter:searchText) | startFrom: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.category}}</td> </tr> </tbody> </table> <div class="pagination"> <button ng-disabled="currentPage == 1" ng-click="currentPage--">上一页</button> <span ng-repeat="n in getNumber(totalPages) track by $index"> <button ng-class="{active: currentPage == $index + 1}" ng-click="currentPage = $index + 1">{{$index + 1}}</button> </span> <button ng-disabled="currentPage == totalPages" ng-click="currentPage++">下一页</button> </div> </div>

对应的控制器代码中,需添加getNumber方法辅助生成分页按钮：

$scope.getNumber = function(num) { return new Array(num); };

通过AngularJS实现分页和搜索功能,核心在于合理利用数据绑定、过滤器和控制器逻辑，搜索功能可通过filter服务或自定义函数实现，分页则需要计算总页数并控制数据切片，结合性能优化和样式美化，可以构建出高效且用户友好的数据展示界面，在实际项目中，还可进一步扩展为动态加载数据或集成后端API，以满足更复杂的需求。