it-swarm.com.de

Verwenden Angular Filter mit Seitenumbruch

Ich verwende einen Filter für ein Array von Elementen in einer Wiederholwiederholung wie folgt:

<input type="text" ng-model="filterText">

<li ng-repeat="item in displayItems | filter : {item_name: filterText}>

Das funktioniert gut und filtert die Elemente perfekt. Das Problem entsteht, weil ich displayItems mit einem Uib-Paginierungselement verwende. Die Paginierung verwendet totalItems anstelle von displayItems.

<uib-pagination class="pagination-sm pagination"
    total-items="totalItems.length" ng-model="page" ng-change="changeItems()">
</uib-pagination>

Natürlich muss ich den Filter irgendwie auf die total-Elemente anwenden, dann die displayItems erstellen und die gefiltertenItems in die uib-pagination einfügen.

Ie. Beim Eingeben der Person wird der Filter im Controller auf die totalItems angewendet, und ich erstelle die gefilterten Elemente, die für die Paginierung erforderlich sind. Ich erstelle dann auch die displayItems aus den gefilterten Elementen. Wie kann ich dies in den Controller und nicht in den HTML-Code für das Wiederholungsprogramm einfügen?

Ich bin nicht sicher, wie ich das machen soll. Irgendwelche Gedanken? Alle helfen sehr geschätzt ....

Ich habe einen Plunker beigefügt, um ihn (nicht) in all seiner Pracht zu zeigen .... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

6
Tom O'Brien

Versuchen,

HTML,

<li ng-repeat="item in filterData = (totalItems | filter : {itemName: filterText}) | limitTo:3:3*(page-1)">

und

<uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
        ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>

JavaScript,

$scope.pageChanged = function() {
  //var startPos = ($scope.page - 1) * 3;
  //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
};

https://plnkr.co/edit/m3jXsxsCGfqKCJYHsw0u?p=preview

28
user1111

Sie können auf das gefilterte Array zugreifen, indem Sie as alias in ng-repeat expression verwenden

<li ng-repeat="item in displayItems | filter : {item_name: filterText} as filteredArray">

Verwenden Sie dann diesen Alias ​​für total-items in der Paginierung

<uib-pagination class="pagination-sm pagination"
    total-items="filteredArray.length" ng-model="page" ng-change="changeItems()">
</uib-pagination>
2
charlietfl