如何使用AngularJs只顯示一個頁面時禁用分頁

Question

我有一張用戶表，我可以根據定義的某些狀態對顯示進行排序。

HTML

<div data-ng-controller="adminController"> 
    <div class="row"> 
     <div class="col-md-9"> 
     <h3>&nbsp;&nbsp; &nbsp;<span style="color:blue">List of Applied Users</span></h3> 
     </div> 
     <div class="col-md-2"> 
     <br> 
     <select class="form-control" id="sel1" data-ng-model="status" required> 
      <option value="">Status</option> 
      <option value="Open">Open</option> 
      <option value="In-Progress">In-Progress</option> 
      <option value="Rejected">Rejected</option> 
      <option value="Verified">Verified</option> 
      <option value="Closed">Closed</option> 
     </select> 
     </div> 
    </div> 
<br> 
<div class="padding"> 
<table class="table table-hover" border="2" > 
    <thead> 
     <tr> 
      <th width="30" bgcolor="#FF8566">Si.No</th> 
      <th width="90" bgcolor="#FF8566">Date</th> 
      <th width="140" bgcolor="#FF8566">Name</th> 
      <th width="340" bgcolor="#FF8566">Service Name</th>    
      <th width="90" bgcolor="#FF8566">Status</th> 
      th width="40" bgcolor="#FF8566"></th> 

       </tr> 
      </thead> 
      <tbody> 
     <tr data-ng-repeat="userDetails in (data | filter:status:status.status).slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) "> 
      <td></td> 
      <td> {{ userDetails.subDate | date : 'MM-dd-yyyy' }} </td> 
      <td> {{ userDetails.fullName }} </td> 
      <td> {{ userDetails.serviceType.serviceName }} </td> 
      <td> {{ userDetails.status.status }} </td> 
      <td> 
       <button type="button" class="btn btn-xs btn-success" data-ng-click="editUser(userDetails.id)" ng-if="userDetails.status.status !=='Closed'" >View</button></td> 
     </tr> 
     </tbody>  
    </table> 

    </div> 


<uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" items-per-page="itemsPerPage" ng-show ="blocked"></uib-pagination> 

</div> 

JS

app.controller('adminController',[ '$scope', '$http', function($scope, $http) { 
    $scope.$watch('status', function() 
      { 
       var array =[]; 
       alert($scope.status); 
       if($scope.status!=undefined) 
       { 
        totaldata.forEach(function(value, arr) 
         { 

          if(value.status.status==$scope.status) 
           { 
            array.push(value); 

           } 
          console.log($scope.status); 

         }) 
         $scope.data = array;   
         $scope.totalItems = array.length; 
         console.log(array.length); 

       } 
       else{ 
        $scope.data = totaldata;   
        $scope.totalItems = totaldata.length; 
        console.log(totaldata.length); 
       } 
      })  

    $http.get('getAlldetails').success(function(response) 
      { 
     $scope.blocked = true; 
       $scope.data = response; 
       totaldata=response; 
       $scope.totalItems = response.length; 
       $scope.currentPage = 1; 
       $scope.itemsPerPage = 9; 
       $scope.maxSize = 5; 

       alert($scope.totalItems.length); 

       $scope.setPage = function (pageNo) { 
        $scope.currentPage = pageNo; 
       }; 


       }).error(function(error) 
        { 
       alert(error); 
      }); 

    $scope.editUser = function(id) 
    { 
     $location.url('/editUser/'+ id); 
    } 
}]); 

如何隱藏分頁如果只有一個網頁應用過濾器後顯示？我試過ng-show和ng-if，但沒有運氣。

Answer 1

過濾你ng-repeat數據像這樣

<tr ng-repeat="row in filteredData = (tableData | filter: filterQuery)">       
     <td>{{row.name}}</td> 
     <td>{{row.last_name}}</td> 
     <td>{{row.age}}</td> 
     <td>{{row.email}}</td> 
</tr> 

包裹你的div和一套NG-顯示/ NG隱藏uib-pagination，僅顯示如果filteredData量越大則每頁的項目分頁（有更多的項目則每頁的項目意味着你有更多然後1頁）

<div ng-show="filteredData.length > itemsPerPage"> 
    <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" items-per-page="itemsPerPage" ng-show ="blocked"></uib-pagination> 
</div> 

，所以當你將改變篩選條件，消化週期將運行一個重新評估你的NG-顯示