AngularJSページネーション例グーグル

Question

のようなロジックでは、私は、このリンクからオンラインで見つけるこのページングソリューションを実装しようとしてい

：

http://jasonwatmore.com/post/2016/01/31/AngularJS-Pagination-Example-with-Logic-like-Google.aspx

私は問題があるため、関数が呼び出される方法であると思います私はすべてのデータがあるので、表示されるべきものがいくつあるか分からないように、setPage関数が呼び出されます。誰かが素早く見て、私が間違っていることを見ることができますか？ここで

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

    vm.uploads = []; 
    vm.includeCancelled = false; 
    vm.uploadDataModal = {}; 
    vm.pager = {}; 

    vm.setPage = setPage; 

    activate(); 

    function activate() { 
     getHistory(); 
     vm.setPage(1); 
    } 

    function setPage(page) { 
     if (page < 1 || page > vm.pager.totalPages) { 
      return; 
     } 

     // get pager object from service 
     vm.pager = PagerService.GetPager(vm.uploads.length, page); 

     // get current page of items 
     vm.items = vm.uploads.slice(vm.pager.startIndex, vm.pager.endIndex + 1); 
    } 

    function getHistory() { 
     HistoryFactory.getHistory(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; 
       } 
      }); 
    } 

これは、非同期呼び出しを理解していないの非常に一般的な間違いである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>Upload Date</th> 
          <th>Product</th> 
          <th>Comments</th> 
          <th>Template</th> 
          <th>Last Updated By</th> 
          <th>Last Updated</th> 
          <th>Status</th> 
          <th>Actions</th> 
         </tr> 
         <tr ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true"> 
          <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> 
       <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> 
     </form> 
    </div> 
</div> 

Answer 1

です。

HistoryFactory.getHistory(vm.includeCancelled).then({})は非同期です。つまり、の非同期呼び出し後にコードを実行してからコードを実行し続けることを意味します。非同期呼び出しが終了すると、のコードが実行されます。これは5ミリ秒または5秒です。だからここ

：

function activate() { 
    getHistory(); 
} 

とにgetHistory()を変更します：

function activate() { 
    getHistory();  // async call, doesn't wait 
    vm.setPage(1);  // executed immediately after, data not ready 
} 

ニーズがあることを

function getHistory() { 
    HistoryFactory.getHistory(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; 
      } 

      // Now call setPage after data is finished 
      vm.setPage(1); 
     }); 
}