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

所以问题是当我想要显示我的结果时 result

我试图更改currentPage = 0所以在视图中我可以单击1并且只有当我点击1时我才能看到结果...当我刷新页面时，重复同样的问题

Answer 1

使用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 过滤器在模板中轻松完成此操作。

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

然后你可以添加按钮（上一个，下一个，上一个。），它会改变currentPage变量，从而改变显示的内容。

分页angularjs

2 个答案: