Implementing List Pagination Using ng-repeat in AngularJS

Introduction

In modern web application development, paginated display of data lists is a key feature for enhancing user experience. AngularJS, as a popular front-end framework, provides elegant solutions for implementing pagination functionality through its powerful data binding and filter mechanisms. This article delves into how to efficiently implement pagination using the ng-repeat directive combined with custom filters.

Core Principles of Pagination

The core of AngularJS pagination lies in slicing the data array. By maintaining state variables for the current page number and the number of items per page, combined with the array's slice method, dynamic segmented display of data can be achieved. The advantage of this method is that it is entirely handled on the client side, responding quickly, and is suitable for scenarios with relatively small data volumes.

Analysis of Key Components

State Management Variables

Pagination functionality requires maintaining several key state variables:

• currentPage: The current page number, starting from 0.
• pageSize: The number of data items to display per page.
• data: The complete data array.

These variables are kept in sync with the view through AngularJS's two-way data binding mechanism; any change in state is automatically reflected in the UI.

Custom startFrom Filter

AngularJS's built-in limitTo filter can only limit the number of items displayed but cannot specify a starting position. Therefore, a custom startFrom filter is needed to display data starting from a specified position:

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; // Convert to integer
        return input.slice(start);
    };
});

This filter takes an input array and a start parameter, returning a subarray from the specified position to the end of the array.

Complete Implementation Solution

Controller Configuration

Initialize pagination-related state variables and data in the controller:

function MyCtrl($scope) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    
    // Calculate total number of pages
    $scope.numberOfPages = function() {
        return Math.ceil($scope.data.length / $scope.pageSize);
    };
    
    // Simulate data loading
    for (var i = 0; i < 45; i++) {
        $scope.data.push("Item " + i);
    }
}

Template Implementation

Combine the use of startFrom and limitTo filters in the HTML template:

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item}}
        </li>
    </ul>
    
    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button>
    
    {{currentPage+1}}/{{numberOfPages()}}
    
    <button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>

Detailed Pagination Logic

Data Filtering Process

The data processing for pagination follows this sequence:

1. First, apply the startFrom filter to slice the array starting from currentPage * pageSize.
2. Then, apply the limitTo filter to restrict the display to pageSize items.
3. The final result is rendered to the page via the ng-repeat directive.

Navigation Control

State control for pagination navigation buttons:

• The Previous button is disabled on the first page.
• The Next button is disabled on the last page.
• Page numbers are displayed in the format Current Page/Total Pages.

Performance Optimization Considerations

For large datasets, pure client-side pagination may cause performance issues. Recommendations:

• For datasets exceeding 1000 records, consider server-side pagination.
• Use virtual scrolling techniques for handling very long lists.
• Set pageSize appropriately to balance user experience and performance.

Practical Application Extensions

Referring to the phone list example in the Q&A, pagination can be combined with search and sort functionalities:

<li ng-repeat="phone in phones | filter:searchBar | orderBy:orderProp | startFrom:currentPage*pageSize | limitTo:pageSize">
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
</li>

This combined usage demonstrates the powerful functionality of AngularJS filter chains.

Conclusion

The pagination implementation based on ng-repeat fully utilizes AngularJS's filter mechanism and data binding features, providing a concise yet powerful client-side pagination solution. Through proper state management and filter combinations, developers can quickly build fully functional pagination components with excellent user experience. For web applications with small to medium-sized datasets, this implementation approach holds significant practical value.