web-dev-qa-db-fra.com

En utilisant Angular filtre avec pagination

J'utilise un filtre sur un tableau d'éléments dans une répétition ng comme ceci:

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

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

Cela fonctionne bien et filtre parfaitement les éléments. Le problème se pose parce que j'utilise displayItems avec un élément de pagination. La pagination utilise totalItems au lieu de displayItems.

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

Il est évident que je dois appliquer le filtre sur les éléments totaux, puis créer les éléments displayItems et placer les éléments filtrés dans la pagination uib.

C'est à dire. Lorsque la personne tape, dans le contrôleur, le filtre est appliqué aux totaux, et je crée les filtrés nécessaires à la pagination. Je crée aussi ensuite les displayItems à partir des filtrés. Comment est-ce que je vais mettre ceci dans le contrôleur et pas dans le HTML pour le ng-repeat?

Je ne sais pas comment faire ça. Des pensées? Toute aide très appréciée ....

J'ai inclus un plunker pour le montrer (ne pas) travailler dans toute sa gloire .... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

angularjspaginationangular-ui-bootstrap
6
Tom O'Brien

Essayer,

HTML,

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

et

<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

Vous pouvez accéder au tableau filtré en utilisant as alias dans l'expression ng-repeat

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

Puis utilisez cet alias pour total-items dans la pagination

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