ng-repeat分頁丟失項目

我正在學習由Adam Freeman編寫的好Pro AngularJS的AngularJS。ng-repeat分頁丟失項目

我被困在使用過濾器的ng-repeat分頁。我知道Angular提供了bootstrap ui指令，但我正在閱讀本書以瞭解角度如何工作。

我的代碼：

<section class="row-fluid" ng-controller="GetAjax"> 
    <div class="col-md-12"> 
     <h2>Repater Caricato in Ajax</h2> 
    </div> 
    <div class="row-fluid"> 
     <div class="col-md-6" style="max-height: 350px; overflow-y: auto" ng-controller="PagedData"> 
      <ul class="list-group"> 
       <li class="list-group-item" ng-repeat="item in data.visitors | filter:query | range:selectedPage:pageSize"> 
        <b>{{item.id}}.</b> {{item.first_name}} {{item.last_name}} | <small><i>{{item.email}} - {{item.country}} {{item.ip_address}}</i></small> 
       </li> 
      </ul> 

      <ul class="pagination"> 
       <li ng-repeat="page in data.visitors | pageCount:pageSize" 
        ng-click="selectPage($index + 1)" 
        ng-class="pagerClass($index + 1)"> 
        <a>{{$index + 1}}</a> 
       </li> 
      </ul> 
     </div>   
    </div> 
</section>

角濾波器

angular.module("customFilters") 

/******* Filters per la paginazione dei dati ******************/ 
//Genera il range di dati in base alla page size 
.filter("range", function ($filter) { 
    return function (data, page, size) { 
     if (angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)) { 
      var start_index = (page - 1) * size; 
      console.log(data.length); 

      if (data.length < start_index) { 
       return []; 
      } else { 
       return $filter("limitTo")(data.splice(start_index), size); 
      } 
     } else { 
      return data; 
     } 
    } 
}) 
//Calcola il numero di pagine 
.filter("pageCount", function() { 
    return function (data, size) { 
     if (angular.isArray(data)) 
     { 
      var result = []; 
      for (var i = 0; i < Math.ceil(data.length/size) ; i++) { 
       result.push(i); 
      } 
      return result; 
     } 
     else 
     { 
      return data; 
     } 
    } 
});

角控制器

.controller("GetAjax", function($scope, $http){ 
    $http.get('data/visitors.json').success(function(data) { 
     $scope.data = {visitors : data}; 
    }); 
}) 
.constant("activeClass", "active") 
.constant("perPage", 30) 
.controller("PagedData", function($scope, $filter, activeClass, perPage){ 

    $scope.selectedPage = 1; 
    $scope.pageSize = perPage; 

    console.log("page"+ $scope.selectedPage); 

    $scope.selectPage = function (newIndex) { 
     $scope.selectedPage = newIndex; 
     console.log({idx: newIndex}); 
    } 

    $scope.pagerClass = function (index) { 
     return (index == $scope.selectedPage) ? activeClass : ""; 
    } 
});

結果是之後的頁面期間3範圍濾波器調用呈現，所述數據陣列喪失所有的數據。奇怪的是，使用本書中的例子，這段代碼完美地工作。

請幫助我知道我的錯誤：d

來源

2014-10-20 sslazio1900

拼接功能將覆蓋陣列

，如果你有一個數組

 

    a = [1,2,3,4]; 
    a.splice(2,1); 
    // a = [1,2,4]

結果爲A = [1,2,4]

使用切片代替

來源

2014-10-20 09:15:07 gooor

太棒了！我不知道爲什麼這本書的例子可行......但很高興知道你的回覆是什麼;）非常感謝！ – sslazio1900 2014-10-20 09:18:52

ng-repeat分頁丟失項目

回答

相關問題