如何在 UI 引导分页中禁用下一步按钮



我正在尝试在我的页面中创建分页并使用分页控制。一切正常,但唯一的疑问是如何在此处手动禁用下一步按钮

<pagination   
    total-items="totalItems" 
    items-per-page= "itemsPerPage"
    ng-model="currentPage" 
    class="pagination-sm"  
    page="currentPage"
    max-size= "maxSize"
    ng-change="pageChanged(currentPage)">
</pagination> 

在我的控制器中-

$scope.currentPage=1;
$scope.itemsPerPage = 5;
$scope.maxSize = 2;
$scope.numberofrows =5;
 $scope.fetchResult =function(startingId){
                  if(startingId ==undefined){
                      $scope.StartingId = ''; 
                  }
                  else{
                      $scope.StartingId= startingId ; 
                  }
                  Api.customerReq.queryProductbyperiod({ productId : $scope.customerProduct , productperiod :$scope.customerPeriod,startingid: $scope.StartingId,numberofrows:$scope.numberofrows}).$promise.then(function(result) {
                        if(result){
                            if(result&&result.length==0){
                                // error alert 
                                }
                            $scope.customerResult = result;
                            if($scope.currentPage==1){
                             $scope.NextStartingId = result[5].id;
                             // on landing page storing last stringId for the next request to cassandra since row num requested as 6.
                            }
                            else{
                            $scope.NextStartingId = result[4].id;  // rest of the page, row num requested as 5.
                            }
                    $scope.previousStartingId=$scope.NextStartingId; 
                            if($scope.currentPage== 1){ 
                                $scope.totalItems= result.length;
                            }
$scope . pageChanged = function (page) {
    if (page > $scope . count)
    {
        $scope . count ++;
        //  temp = page;
        $scope . nextPage();
    } else
    {
        $scope . count = page;
        $scope . prevPage();
    }
};
              $scope.prevPage = function() {
                  if($scope.currentPage ==1){
                         $scope.previousStartingId = '';
                        }
                  $scope.fetchResult($scope.previousStartingId);
                  if($scope.currentpage>1)
                       $scope.totalItems -=5;
              };
             $scope.nextPage = function() {
                 if($scope.currentPage!=1){
                     $scope.numberofrows =5;
                 }                               
                 $scope.fetchResult($scope.NextStartingId);
                  $scope.totalItems +=5;     
                  };

这里调用每个页面上的下一页和上一页更改。我缺少什么或如何手动禁用下一个链接?或者在这种情况下,日期选择器将如何工作?

是的,每次点击下一个或上一个按钮时,我都会请求 api,因为 cassandra 对分页的支持非常有限。因此,每次我都使用存储的 stringId 进行查询以过滤结果,因为它们作为有序列表存储在 Cassandra 表中。所以它更像是在这里做的服务器端分页。

如果没有要显示的页面,UI boortstrap将自动禁用下一个链接。您无需使用 ng-change 来禁用分页项目。如果您需要其他处理程序,例如确认或 ajax 请求,我不应该使用它们。您可以通过以下公式进行检查:

totalItems / temsPerPage - maxSize

最新更新