角列のソートクリックのヘッダー

Question

私はすべてのデータの並べ替えを有効にしようとしています。クライアント側でもページ分割を行っています。私はページングの別の問題を抱えています。最初の25レコードのみを表示しています。ページを変更すると、25レコードの新しいセットは表示されませんが、このソートの問題を理解したいと思います。ここで

function DataUploadHistoryController($window, $scope, $modal, $state, toaster, PagerService, DataUploadHistoryFactory, $timeout) { 
    var vm = this; 

    vm.uploads = []; 
    vm.includeCancelled = false; 
    vm.uploadDataModal = {}; 
    vm.pager = {}; 
    vm.setPage = setPage; 
    vm.itemsByPage=25; 
    $scope.sortType = 'uploadDate'; 
    $scope.sortReverse = true; 

    activate(); 

    function activate() { 
     getUploadHistory(); 
     $scope.$watch('vm.includeCancelled', getUploadHistory); 
     $scope.$on('closeUploadModal', function(event, response) { 
      if (vm.uploadDataModal.opened) { 
       vm.uploadDataModal.close(); 
       getUploadHistory(); 

       var poller = function() { 
        DataUploadHistoryFactory.getUploadById(response.dataLoadExecutionId).success(function(response) { 
         if(response.status.statusCd !== 'NEW'){ 
          if(response.status.statusCd === 'ERROR') 
           toaster.error('Could not load execution. Please remove.'); 
          else 
           toaster.success('Data execution load complete.'); 
          getUploadHistory(); 
          return; 
         } 
         $timeout(poller, 5000); 
        }) 
       } 
       poller(); 

      }; 
     }); 
     $scope.$on('cancelUploadModal', function(event, response) { 
      if (vm.uploadDataModal.opened) { 
       vm.uploadDataModal.close(); 
       getUploadHistory(); 

      }; 
     }); 
     /* 
     $scope.$on('closeDownloadTemplateModal', function() { 
      if (vm.downloadTemplateModal.opened) 
       vm.downloadTemplateModal.close(); 
     }); 
     */ 
    } 

    var checkProcessingPoller = function() { 
     DataUploadHistoryFactory.getUploadHistory(vm.includeCancelled).then(
       function(response) { 
        _.each(response.data, function(upload) { 
         if(upload.processing = upload.status && ['PROCESSING'].indexOf(upload.status.statusCd.trim()) > -1){ 
          $timeout(checkProcessingPoller, 5000); 
          console.log("Checking Status"); 
         } 
        }); 
        vm.uploads = response.data; 
       }); 
    } 
    checkProcessingPoller(); 

    function getUploadHistory() { 
     DataUploadHistoryFactory.getUploadHistory(vm.includeCancelled).then(
      function(response) { 
       _.each(response.data, function(upload) { 
        upload.inProgress = upload.status && ['INPROGRESS','NEW'].indexOf(upload.status.statusCd.trim()) > -1; 
       }); 
       vm.uploads = response.data; 

       if($state.params.reupload){ 
        uploadProductionData(); 
        $state.params.reupload = false; 
       } 
       vm.setPage(1); 
       vm.itemsByPage=25; 
      }); 
    } 

    $scope.sortBy = function(keyName){ 
     $scope.sortReverse = !$scope.sortReverse; 
     $scope.sortType = keyName; 
    }; 

は、ヘッダのクリックを修正するHTML

<div class="chrthdr" ui-view="header"></div> 
<div id="userResults"> 
<div class="card card-full-width"> 
    <div class="card-header dark-blue"> 
     <a class="card-config" data-toggle="uploadHistory" data-placement="left"><i class="glyphicon glyphicon-info-sign"></i></a> 
     <div class="card-title">Data History</div> 
    </div> 
    <div class='form-horizontal range-date' style="overflow-y: auto;"> 
     <form> 
      <div class="panel-body"> 
       <div> 
        <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; margin-right: 5px" type="button" ng-click="vm.uploadProductionData()">Upload Data</span> 
        <label> 
         <input type="checkbox" ng-model="vm.includeCancelled">Include removed executions 
        </label> 
        <!--<span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; margin-left: 5px" type="button" ng-click="vm.viewTemplates()">Download Template</span>--> 
       </div> 
       <div> 
        <table class="table"> 
         <tr> 
          <th ng-click="sortBy('uploadDate')" >Upload Date 
           <span ng-show="sortType == 'uploadDate' && sortReverse" class="fa fa-caret-down"></span> 
           <span ng-show="sortType == 'uploadDate' && !sortReverse" class="fa fa-caret-up"></span> 
          </th> 
          <th>Product</th> 
          <th>Comments</th> 
          <th ng-click="sortBy('templateName')">Template 
           <span ng-show="sortType == 'templateName' && sortReverse" class="fa fa-caret-down"></span> 
           <span ng-show="sortType == 'templateName' && !sortReverse" class="fa fa-caret-up"></span> 
          </th> 
          <th>Last Updated By</th> 
          <th>Last Updated</th> 
          <th>Status 
           <span class="fa fa-caret-down"></span> 
          </th> 
          <th>Actions</th> 
         </tr> 
         <tr ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true | limitTo: vm.itemsByPage"> 
          <td style="white-space: nowrap;">{{upload.uploadDate}}</td> 
          <td>{{upload.product}}</td> 
          <td style="white-space: nowrap;">{{upload.comments}}</td> 
          <td style="white-space: nowrap;">{{upload.templateName}}</td> 
          <td style="white-space: nowrap;">{{upload.lastUpdatedByUser}}</td> 
          <td style="white-space: nowrap;">{{upload.lastUpdateDate}}</td> 
          <td style="white-space: nowrap;">{{upload.status.statusName}}</td> 
          <td> 
           <button class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " ng-hide="upload.status.statusCd === 'NEW' || upload.status.statusCd === 'ERROR'" ng-click="vm.loadStagingPage(upload.dataLoadExecutionId, upload.product, upload.status)">View</button> 
           <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " type="button" ng-click="vm.cancelDataExecution(upload.dataLoadExecutionId)" ng-show="upload.inProgress || upload.status.statusCd === 'ERROR'">Remove</span> 
          </td> 
         </tr> 
        </table> 
       <div class="text-center"> 
        <ul ng-if="vm.pager.pages.length" class="pagination"> 
         <li ng-class="{disabled:vm.pager.currentPage === 1}"> 
          <a ng-click="vm.setPage(1)">First</a> 
         </li> 
         <li ng-class="{disabled:vm.pager.currentPage === 1}"> 
          <a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a> 
         </li> 
         <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}"> 
          <a ng-click="vm.setPage(page)">{{page}}</a> 
         </li>    
         <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}"> 
          <a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a> 
         </li> 
         <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}"> 
          <a ng-click="vm.setPage(vm.pager.totalPages)">Last</a> 
         </li> 
        </ul> 
       </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

Answer 1

は非常に単純です。ここでは、現在持っているものです。

ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true | limitTo: vm.itemsByPage"

それはに更新する必要があります

ng-repeat="upload in vm.uploads | orderBy:sortType:sortReverse | limitTo: vm.itemsByPage"

逆が正しく機能するためには、列を切り替えたとき、それは現在のソートかどうかを確認する必要がありますアイテムが選択されています：

$scope.sortBy = function(keyName){ 
    if($scope.sortType === keyName) { 
     $scope.sortReverse = !$scope.sortReverse; 
    } else { 
     $scope.sortReverse = false; 
    } 
    $scope.sortType = keyName; 
    console.log('Type', $scope.sortType, 'Reverse', $scope.sortReverse); 
};