angularjs ng-repeat with filter返回空數組第二次

Question

關於angularjs的學習過程，我剛創建了一個帶分頁的表格。下面是代碼

HTML

<table class="table"> 
     <thead> 
     <tr> 
      <th>ID</th> 
      <th>NAME</th> 
      <th>EMAIL</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="user in data | range:selectedPage:pageSize"> 
      <td>{{user.id}}</td> 
      <td>{{user.name}}</td> 
      <td>{{user.email}}</td> 
     </tr> 
     </tbody> 
    </table> 
    <div class="pull-right btn-group"> 
     <a ng-repeat="page in data | filter:pageCount:pageSize" ng-click="selectPage($index + 1)" class="btn btn-default" ng-class="getPageClass($index + 1)"> 
    {{$index + 1}} 
    </a> 
    </div> 
    </div> 

JS

var exampleTable = angular.module('exampleTable', []); 
exampleTable.controller('exampleTableCont', function($scope) { 
    $scope.data = [{ 
    "id": 1, 
    "name": "john", 
    "email": "john@john.com" 
    }, { 
    "id": 3, 
    "name": "william", 
    "email": "william@test.com" 
    }, { 
    "id": 2, 
    "name": "clark", 
    "email": "clark@test.com" 
    }, { 
    "id": 5, 
    "name": "Brian", 
    "email": "Brian@Brian.com" 
    }, { 
    "id": 4, 
    "name": "smith", 
    "email": "smith@smith.com" 
    }, { 
    "id": 6, 
    "name": "chris", 
    "email": "chris@test.com" 
    }, { 
    "id": 7, 
    "name": "june", 
    "email": "june@june.com" 
    }]; 
    $scope.selectedPage = 1; 
    $scope.pageSize = 3; 
    $scope.selectPage = function(newPage) { 
    $scope.selectedPage = newPage; 
    } 
    $scope.getPageClass = function(page) { 
    return $scope.selectedPage == page ? "btn-primary" : ""; 
    } 
}); 

exampleTable.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); 
     } 
     console.log(result); 
     return result; 
    } else { 
     return data; 
    } 
    } 
}); 
exampleTable.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; 
     if (data.length < start_index) { 
     return []; 
     } else { 
     console.log($filter("limitTo")(data.splice(start_index), size)); 
     return $filter("limitTo")(data.splice(start_index), size); 
     } 
    } else { 
     return data; 
    } 
    } 
}); 

這裏是plunker

我試圖安慰range過濾器，而這樣做我看到它運行兩次。 第一次用3行數據，第二次用空數組。由於它沒有繪製返回空數組表。

我可以知道爲什麼它會返回空數組而不是3數組。如何克服這一點？

pageCount過濾器也不像預期的那樣工作，但這裏的pageCount過濾器甚至沒有運行一次。

Answer 1

我發現了錯誤。我使用的是直接在源數組本身上工作的splice方法。

雖然過濾器不會影響$ scope.data，但它會影響指令數據。由於過濾器多次運行，它會一次又一次地刪除數據，導致數組爲空。因此表格沒有繪製。

$filter("limitTo")(data.splice(start_index), size); 

TO

$filter("limitTo")(data.slice(start_index), size); 

這裏是更新plunker

Answer 2

<tr ng-repeat="user in data | range:user:selectedPage:pageSize"> 

您沒有向過濾器發送數據。更新此。也許它會幫助你（y）