Question

我正在使用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

Answer 1

这可能会有所帮助。

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

anonymous class

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

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

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

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

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

希望它有所帮助。谢谢， Oodles Technologies

Angular UI Bootstrap分页无法正常工作

1 个答案: