使用ng-repeat的AngularJs Bootstrap分頁不能正常工作

Question

我試圖在ng-repeat上實現Bootstrap分頁。

HTML

<tr data-ng-repeat="userDetails in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) |filter:status:status.status" > 
     <td>{{userDetails.status.status}}</td> 
     <td> {{ userDetails.subDate | date : 'MM-dd-yyyy' }} </td> 
     <td> {{ userDetails.fullName }} </td> 
     <td> {{ userDetails.serviceType.serviceName }} </td> 
     <td> {{ userDetails.status.status }} </td> 
</tr> 
<select ng-model="viewby" ng-change="setItemsPerPage(viewby)"><option>5</option><option>10</option></select> records at a time. 

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

JS

$http.get('getAlldetails').success(function(response) 
    { 
     $scope.data = response; 
     $scope.totalItems = $scope.data.length; 
     $scope.viewby = 10; 
     $scope.currentPage = 1; 
     $scope.itemsPerPage = $scope.viewby; 
     $scope.maxSize = 5; //Number of pager buttons to show 

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

     $scope.setItemsPerPage = function(num) { 
      $scope.itemsPerPage = num; 
      $scope.currentPage = 1; 
      }    
    }) 

問題是，如果我設置每頁10項，它示出了像在第一頁7項，在9項的項的隨機數下一頁並繼續。我嘗試添加ui-bootstrap-tpls.js，但沒有運氣。

Answer 1

由於在過濾之前應用了分頁，因此您看到了這些結果。因此，對於頁面大小10，選擇了10個項目，然後過濾器運行留下7或9個項目，或者其中許多項目滿足過濾器。

這可以通過重新安排你的NG-重複這樣的代碼是固定的，以確保過濾器首次應用於：

<tr data-ng-repeat="userDetails in (data | filter:status:status.status).slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) " >