分页的问题Angularjs

Question

我有分页问题：这是我的html

    <div class="panel panel-info" ng-repeat="item in filteredTodos | orderBy: 'Date' : true | filter : search">
     {{item.Name}}
    </div>
<div data-pagination="" data-num-pages="numPages()" 
      data-current-page="currentPage" data-max-size="maxSize"  
      data-boundary-links="true"></div>

这是我的控制器：

$scope.filteredTodos = []
  $scope.currentPage = 1
  $scope.numPerPage = 4
  $scope.maxSize = 5
  $scope.makeTodos = function() {
    $scope.Offre = [];
    $http({
                header: 'content-type:application/json',
                method: 'GET',
                url: '/GetOffre',
            }).success(function (messages) {
            $scope.Offre =messages  ;
      });
  };
  $scope.makeTodos(); 
  $scope.numPages = function () {
    return Math.ceil($scope.Offre.length / $scope.numPerPage);
  };
  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;
    $scope.filteredTodos = $scope.Offre.slice(begin, end);
  });

所以问题是我想显示结果结果

我尝试更改currentpage = 0，因此，从1点单击1中，只有在单击1时才能看到结果...而当我刷新页面时，请重复相同的问题

<</p>

Answer 1

使用ng-repeat中的limitto比$ watch

更好

<div class="panel panel-info" ng-repeat="item in filteredTodos | orderBy: 'Date' : true | filter : search"|limitTo:(($scope.currentPage - 1) * $scope.numPerPage):$scope.numPerPage*$scope.currentPage>
 {{item.Name}}
</div>

Answer 2

您可以使用内置的 limitTo filter。

<div class="panel panel-info" ng-repeat="item in Offre | limitTo : maxSize : (currentPage * maxSize - maxSize)">
    <!-- print your item details here -->
</div>

然后，您可以添加按钮(上一个，下一个，ATD。(，该按钮将更改currentPage变量，从而更改显示的内容。