Angular UI Bootstrap 分页不起作用答案

【问题标题】：Angular UI Bootstrap pagination not workingAngular UI Bootstrap 分页不起作用
【发布时间】：2014-08-14 14:07:41
【问题描述】：

我正在使用 ui-Bootstrap 分页，但它没有按预期工作，我参考了以下帖子，但它对我不起作用。

How do I tell ui-Bootstrap what content to paginate?

我的代码如下。

<div>
  <ul>
     <li ng-repeat= "payment in paymentHistory">
        <div >
          <div > 
            <p >payment.status</p> 
           </div>
           <div>
              <p >payment.cost</p>
           </div>
        </div>
      </li>
    </ul>
 </div>
 <div ng-show="pagination"> <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination></div>

我的控制器代码：

paymentFactory.getPaymentHistory( )
.success(function (paymentHisInfo) {
     for(var i = 0; i< paymentHisInfo.list.length; i++){
      $scope.paymentHistory.push({
     "status":paymentHisInfo.list[i].status,
              "cost":paymentHisInfo.list[i].cost});
       }
       $scope.list = $scope.paymentHistory;
       $scope.itemsPerPage = 5;
       $scope.currentPage = 1;
           $scope.pageCount=Math.ceil($scope.list.length / $scope.itemsPerPage);
       $scope.list.$promise.then(function () {
      $scope.totalItems = $scope.list.length;

        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
        end = begin + $scope.itemsPerPage;
                $scope.paymentHistory = $scope.list.slice(begin, end);
      });

    })
    .error(function(){
        console.log("error occured in getPaymentHistory");
    });
Please let me know whats wrong in my code

【问题讨论】：

这是我的错……我的代码中有输入。我更新了运行良好的代码。
你应该回答你自己的问题或删除这个问题。

标签： pagination angular-ui-bootstrap

【解决方案1】：

这可能会有所帮助。

UIB Pagination 是轻量级的分页指令，可帮助我们对 Web 项目进行分页。要使用 Angular UI 引导分页，我们可以在此处获取代码表单 https://angular-ui.github.io/bootstrap/ 并可以在我们的项目中使用。要使用我们有 HTML sn-p 添加到我们的项目中。

<pagination boundary-links="true" max-size="maxSize" ng-change="pageChanged()" ng-model="currentPage" total-items="totalPages">  </pagination>
angular.module('myModule', ['ui.bootstrap']);
 .controller('myCtrl', ['$scope',    function ($scope) {
     $scope.maxSize = 5;
     $scope.currentPage = 1;
     $scope.totalPages = 20;

   $scope.pageChanged = function () {
        // operation to perform on page changed
        console.log("Hi I am on ",($scope.currentPage-1),"page")
    };
  }])

1) maxSize 是页面上的数字页面导航器。

2) currentPage 是 ng-model 指定的 HTML 中的活动页面。

3) totalPages 是所有页面的数量。

4) boundary-links 用于显示。第一页和最后一页按钮，默认为 false。

4) ng-change 调用页面更改事件的操作。

希望对您有所帮助。谢谢， Ooodles技术

【讨论】：