AngularJS分页问题：所有页面显示相同数据

Hey there, let's figure out why your pagination isn't working and every page displays the same set of results. Based on what you described—your start variable stuck at 0 and currentPage not incrementing—here are the most likely issues and how to fix them:

1. Check currentPage Binding & Update Logic #

The root problem is probably that your currentPage value isn't actually changing when you click pagination controls. Here's how to ensure it updates correctly:

Controller Setup #

First, initialize your pagination variables and add a function to handle page changes:

angular.module('yourApp', [])
.controller('SearchController', function($scope, $http) {
  // Initialize pagination state
  $scope.currentPage = 1; // Start on page 1, not 0!
  $scope.pageSize = 10; // Adjust to your desired items per page

  // Fetch search results from API
  $http.get('/your-search-endpoint')
    .then(function(response) {
      $scope.GetsearchResults = response.data;
    });

  // Update current page when a pagination button is clicked
  $scope.setPage = function(pageNum) {
    // Validate page number to prevent invalid values
    if (pageNum >= 1 && pageNum <= $scope.totalPages) {
      $scope.currentPage = pageNum;
      console.log('Current page updated to:', $scope.currentPage); // Debug check
    }
  };

  // Calculate total pages whenever search results load
  $scope.$watch('GetsearchResults', function() {
    if ($scope.GetsearchResults) {
      $scope.totalPages = Math.ceil($scope.GetsearchResults.length / $scope.pageSize);
    }
  });
})

Pagination Controls in HTML #

Make sure your pagination buttons are correctly bound to the setPage function:

<div ng-controller="SearchController">
  <!-- Pagination Buttons -->
  <div class="pagination">
    <button ng-click="setPage(currentPage - 1)" ng-disabled="currentPage === 1">
      Previous
    </button>
    <!-- Generate page number buttons -->
    <button 
      ng-repeat="page in [] | range:1:totalPages" 
      ng-click="setPage(page)"
      ng-class="{active: currentPage === page}"
    >
      {{ page }}
    </button>
    <button ng-click="setPage(currentPage + 1)" ng-disabled="currentPage === totalPages">
      Next
    </button>
  </div>
</div>

You'll also need a range filter to generate the page number buttons:

.filter('range', function() {
  return function(input, start, end) {
    start = parseInt(start);
    end = parseInt(end);
    for (var i = start; i <= end; i++) {
      input.push(i);
    }
    return input;
  };
});

2. Fix the startFrom Filter Implementation #

Your start variable is stuck at 0 because it's not being calculated from currentPage. Here's the correct filter and how to use it:

Correct startFrom Filter #

.filter('startFrom', function() {
  return function(input, start) {
    start = parseInt(start); // Ensure it's a number
    return input ? input.slice(start) : []; // Slice the array starting at the calculated index
  };
});

Apply Filters in ng-repeat #

Use the filter with a dynamic starting index based on currentPage and pageSize:

<!-- Search Results List -->
<ul>
  <li ng-repeat="item in GetsearchResults | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize">
    {{ item.yourDataField }} <!-- Replace with your actual data properties -->
  </li>
</ul>

The key here is (currentPage - 1)*pageSize: for page 1, this gives 0 (start at the first item); for page 2, it gives 1*10=10 (start at the 11th item), and so on.

3. Debugging Checks #

If it's still not working, try these quick checks:

• Open your browser's developer console and verify that $scope.currentPage changes when you click pagination buttons (use the console.log in the setPage function).
• Confirm that GetsearchResults contains all your API data (log it to the console to ensure it's a full array, not just a single page of results).
• Double-check that pageSize matches the value you're using in the limitTo filter.

内容的提问来源于stack exchange，提问作者user9326447