Simple pagination with angularjs

Question

I'd like to implement pagination with AngularJS but I have some problems.

I don't know how to update the $scope.agreements object when clicking on a new page...

var app = angular.module("GestiawebApp", []);

app.controller("AgreementsController", function($scope, $http) {
  
  var nbPages, limit;

  $http.get('/api/agreement').success(function(data, status, headers, config) {
    
    limit = data.limit;
    nbPages = Math.ceil(data.agreements.length/data.limit);
    
    $scope.agreements = data.agreements.slice(0, limit);
  });

  $scope.getPages = function() {
  	var pages = [];
  	for (var i = 1; i <= nbPages; i++) {
  		pages.push(i);
  	}
  	return pages;
  };

  $scope.goToPage = function(page){
    // simple test to change the agreements, but it seem's not working
  	$scope.agreements = $scope.agreements.slice(page*limit, (page*limit)+limit);
  };
});

<!-- Loop -->
<tr ng-repeat="agreement in agreements | filter:search">
  <td>{{agreement.number}}</td>
  <td>{{agreement.reference}}</td>
  <td>
    {{agreement.billbook.capital}} €
  </td>
</tr>
<!-- End loop -->

<!-- Paginaiton -->
<ul>
  <li ng-repeat="i in getPages() track by $index" ng-click="goToPage($index+1)">{{$index+1}</li>
</ul>
<!-- End pagination -->

nnc1311 · Accepted Answer · 2015-02-27 08:13:12Z

1

You should store all agreements data in a variable to use for paginating

$scope.allAgreements = [];
$http.get('/api/agreement').success(function(data, status, headers, config) {

    limit = data.limit;
    nbPages = Math.ceil(data.agreements.length/data.limit);
    $scope.allAgreements = data.agreements; //new change
    $scope.agreements = $scope.allAgreements.slice(0, limit);
  });

$scope.goToPage = function(page){
    // simple test to change the agreements, but it seem's not working
    $scope.agreements = $scope.allAgreements.slice(page*limit, (page*limit)+limit);
  };

answered Feb 27, 2015 at 8:13

nnc1311

892 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tonymx227 Over a year ago

Thank you, but I have a filter on my agreements, how to change getPages() when a changing page is happen?

nnc1311 Over a year ago

Have you applied new code, and has it act as your expecting ? I think when the agreements variable change the filter would reapply to new data

tonymx227 Over a year ago

Yes the new code works, but the getPages function return all pages, and when I apply a filter I'd like to refresh pages...

Collectives™ on Stack Overflow

Simple pagination with angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related