CODEWITHSUNDEEP
angularjs
tonymx227
tonymx227

Reputation: 5451

Simple pagination with angularjs

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 -->

Upvotes: 0

Views: 814

Answers (1)

nnc1311
nnc1311

Reputation: 89

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);
  };

Upvotes: 1

Related Questions