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指令过滤数据：

<input type="text" ng-model="searchText" placeholder="搜索产品名称或分类">  
<ul>  
    <li ng-repeat="item in filteredItems = (allItems | filter:searchText) | startFrom: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">  
        {{item.name}} - {{item.category}}  
    </li>  
</ul>  

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

$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，以满足更复杂的需求。