与angularjs简单的分页

Question

我想用AngularJS实现分页，但我遇到了一些问题。

我不知道如何在点击新页面时更新$scope.agreements对象...

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该将所有协议数据存储在变量中以用于分页

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