如何在ui bootstrap分页中禁用下一个按钮？

Question

I am trying to create pagination in my page and using pagination control. Everything works fine, but only doubt is how to manually disable next button here

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

In my controller-

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

Here calling next and previous page on each pagechange. What I am missing or how to manually disable nextlink? or how datepicker will work in this situation?

Yes I do api request each time I hit next or prev button, as cassandra has very limited support to pagination. So each time am querying with stored stringId to filter the result as they are storing in Cassandra table as ordered list. So it is more like server side pagination am doing here.

Answer 1

UI boortstrap will automatically disable next link if there are no pages to show. You don't need to use ng-change for disabling pagination items. I't supposed for other handlers if you need them, for example confirmation or ajax request. You can check by following formula:

totalItems / temsPerPage - maxSize