pagination ng-repeat only show data in the first page

Question

i'm trying to show a list with pagination in angularjs, but only show first page and the others are empty. Can you help me?

This is my code:

Controller.js:

angular.module('Client').controller('ListaInventarioCtrl',  function($scope, $location, $filter, InventarioResource){

    $scope.Inventarios = InventarioResource.query();  
    $scope.pageSize = 5;  
    $scope.currentPage = 0;

    $scope.getData = function () {
      return $filter('filter')($scope.Inventarios, $scope.search)
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }
});

angular.module('Client')
.filter('startFrom', function() {  
    return function(input, start) {    
        start = +start;   
        return input.slice(start);    
    }   
});

listInventario.html:

<div class="input-field">
        <input placeholder="Search" type="text" ng-model="search">
</div>

<tr ng-repeat="Inventario in Inventarios | filter:search | limitTo:pageSize | startFrom:currentPage*pageSize">
        <td>{{ Inventario.id }}</td>
</tr>

<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
  </button>
  {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng- click="currentPage=currentPage+1">
    Next
 </button>

When i click Next button, the list in ng-repeat is empty

Oh many item have you in Inventarios in the first call ? Or better share the code behind Inventario.query(). You should maybe make a new call with page parameters. Check your spaces in your example you have a hole `ng- click="currentPage=currentPage+1">` — Galhem, Aug 18 '16 at 16:05
InventarioResource is a service, It is to get the data. The hole is only in the example, in my code it´s correct. — Yayo Nuñez, Aug 18 '16 at 16:22

score 0 · Answer 1 · answered Aug 18 '16 at 16:40

I found the solution, you must first use "startFrom" and after "limitTo" in the ng-repeat.

This would be the solution:

<tr ng-repeat="Inventario in Inventarios | filter:search | startFrom:currentPage*pageSize | limitTo:pageSize">
        <td>{{ Inventario.id }}</td>
</tr>

Luis Angel Pena Zuniga · Answer 2 · 2021-03-23T20:20:58.513

I will complement the answers with: limitTo:pageSize track by $index"

<tr>      
    <td data-ng-repeat="Inventario in filteredData =
        (Inventarios| filter:search)
        | startFrom: currentPage * pageSize
        | limitTo:pageSize track by $index">

        <span>{{Inventario.id}}</span>
     </td>
 </tr>

Or in this answer that i found y the first option there ir a good example

Stackoverflow: enter link description here

Plunker: enter link description here

Get lucky :)

pagination ng-repeat only show data in the first page

2 Answers2