AngularJSのページ更新の問題

Question

AngularJSでページネーションを使用してアイテムを表示しています。

たとえば、12個のアイテムがあり、1ページあたりのアイテム数は5です。したがって、最初の2ページには5アイテム、最後のページには2アイテムが表示されます。

page-1からpage-2にページを切り替えると、page-1とpage-2の両方から10項目がすべて一緒に表示され、ページ2の項目が表示されます。

page-2からpage-3まで同じことが起こりましたが、page-2とpage-3の両方から7つのアイテムがすべて一緒に表示され、ページ3のアイテムが表示されます。

ページを切り替えるたびに、同じことが観察されます。

何が間違っている可能性がありますか？

私のコードは以下の通りです。

   html 

       <div class="adds-wrapper"> 
        <div ng-show="Available"> 
         <div class="item-list" ng-repeat="hotel in pagedItems[currentPage]"> 
        <!-- this is how items are displayed -->  
       </div> 

       <div class="pagination-bar"> 
        <ul class="pagination"> 
         <li ng-class="{disabled: currentPage == 0}"> 
          <a class="pagination-btn" href ng-click="prevPage()">« Prev</a></li> 
         <li ng-repeat="n in range(pagedItems.length)" ng-class="{active: n == currentPage}" ng-click="setPage()"> 
          <a href ng-bind="n + 1">1</a> 
         </li> 
         <li ng-class="{disabled: currentPage == pagedItems.length - 1}"> 
          <a class="pagination-btn" href ng-click="nextPage()">Next »</a></li> 
        </ul> 
       </div> 



Javascript 

function groupToPages() { 
     $scope.pagedItems = []; 
     for (var i = 0; i < $scope.filteredItems.length; i++) { 
      var j = Math.floor(i/$scope.itemsPerPage); 
      if (i % $scope.itemsPerPage === 0) { 
       $scope.pagedItems[j] = [$scope.filteredItems[i]]; 
      } else { 
       $scope.pagedItems[j].push($scope.filteredItems[i]); 
      } 
     } 
    }; 

var loadPagination = function() { 
    $scope.sortingOrder = $scope.sortingOrder; 
    $scope.reverse = false; 
    $scope.filteredItems = []; 
    $scope.groupedItems = []; 
    $scope.itemsPerPage = 5; 
    $scope.pagedItems = []; 
    $scope.currentPage = 0; 
    $scope.items = $scope.HotelAndResorts; 
    $scope.filteredItems = $scope.HotelAndResorts; 
    $scope.hotelAvailable = true; 
    if ($scope.HotelAndResorts) { 
     if ($scope.HotelAndResorts.length == 0) { 
      $scope.hotelAvailable = false; 
      $scope.errorMessage = "No Post Found."; 
     } 
    } else { 
     $scope.hotelAvailable = false; 
     $scope.errorMessage = "No Post Found." 
    } 
    /*var searchMatch = function (haystack, needle) { 
     if (!needle) { 
      return true; 
     } 
     return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1; 
    };*/ 
    groupToPages(); 

    $scope.range = function (start, end) { 
     var ret = []; 
     if (!end) { 
      end = start; 
      start = 0; 
     } 
     for (var i = start; i < end; i++) { 
      ret.push(i); 
     } 
     return ret; 
    }; 

    $scope.prevPage = function() { 
     if ($scope.currentPage > 0) { 
      $scope.currentPage--; 
     } 
    }; 

    $scope.nextPage = function() { 
     if ($scope.currentPage < $scope.pagedItems.length - 1) { 
      $scope.currentPage++; 
     } 
    }; 

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

    $scope.sort_by = function (newSortingOrder) { 
     if ($scope.sortingOrder == newSortingOrder) 
      $scope.reverse = !$scope.reverse; 

     $scope.sortingOrder = newSortingOrder; 

     // icon setup 
     $('th i').each(function() { 
      // icon reset 
      $(this).removeClass().addClass('icon-sort'); 
     }); 
     if ($scope.reverse) 
      $('th.' + new_sorting_order + ' i').removeClass().addClass('icon-chevron-up'); 
     else 
      $('th.' + new_sorting_order + ' i').removeClass().addClass('icon-chevron-down'); 
    }; 
} 

Answer 1

あなたがページングされたアイテムを更新した後にページ付けすると、これはフィックスアップ様々なjavascriptの事を見てAngularJSを伝えます）（scope.apply $を呼び出してみてください。 AngularはJavascriptを非同期的に動作させるためにフードの下でいくつかの魔法を実行します。私は単純化しています。あなたが好きなのであれば、正確な文書を読むことができますが、私が適用しなかったので、95％の時間がかかる場合があります。