angularjs ng-repeat mit Filter return leeres Array beim zweiten Mal

Question

Im Lernprozess von angularjs habe ich gerade eine Tabelle mit Paginierung erstellt. Hier ist der Code

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; 
    } 
    } 
}); 

Hier ist die plunker

Ich versuchte, die range Filter zu trösten, während dies zu tun ich es sehe laufe zweimal. Zum ersten Mal mit der 3 Datenzeile und zum zweiten Mal mit einem leeren Array. Da es eine leere Array-Tabelle zurückgibt, wird es nicht gezeichnet.

Kann ich wissen, warum es leere Array anstelle der 3-Array zurückgibt. Wie man das überwindet?

pageCount Filter funktioniert auch nicht wie erwartet, aber hier pageCount Filter nicht einmal für ein einziges Mal ausgeführt.

Answer 1

Ich habe den Fehler gefunden. Ich benutzte splice Methode, die direkt auf den Quell-Arrays selbst arbeiten.

Obwohl der Filter die Datei $ scope.data nicht beeinflusst, aber die Daten der Richtlinie beeinflusst. Da der Filter mehrere Male läuft, entfernt er die Daten immer wieder und führt zu einem leeren Array. Daher wird die Tabelle nicht gezeichnet.

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

TO

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

Hier ist die aktualisierten plunker

Answer 2

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

Sie haben keine Daten an den Filter gesendet. Aktualisieren Sie dies. Vielleicht hilft es Ihnen (y)