À l'aide de filtre Angulaire avec la pagination

Je suis à l'aide d'un filtre sur un tableau d'éléments dans un ng-repeat comme ceci:

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

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

Cela fonctionne bien et filtre les éléments parfaitement.Le problème se pose parce que je suis en utilisant displayItems avec un uib-la pagination de l'élément. 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>

Évidemment j'ai besoin de quelque sorte d'appliquer le filtre sur le total des éléments, puis créer le displayItems, et de mettre le filteredItems dans l'uib-la pagination.

Ie. Lorsque les types de personnes, dans le contrôleur, le filtre est appliqué à la totalItems, et je crée l'filteredItems nécessaires pour la pagination. J'ai aussi créer ensuite le displayItems de la filteredItems. Comment puis-je mettre dans le contrôleur, et non dans le code HTML de la ng-repeat?

Je ne suis pas sûr de la façon de le faire. Toutes les pensées? Toute aide appréciée....

J'ai inclus un plunker pour l'afficher (ou pas) du travail dans toute sa splendeur....
https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

  • Changement total-items à: total-items="filteredItems.length".
  • Faire le total des éléments dans filteredItems dans le Contrôleur - comment puis-je créer ces éléments filtrés est la question?
  • Essayez ceci. plnkr.co/modifier/9diyq1FdTorI5kKmitDd?p=preview
InformationsquelleAutor Tom O'Brien | 2016-07-17
  1. 29

    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

    • Cheers - c'est exactement ce que je cherchais!
    • Super, ça a marché parfaitement pour moi ui-bootstrap-npt-2.1.4.min
    • Wow, je n'ai jamais vu personne utiliser le filteredData = ... dans le ng-repeat. Son incroyable. Notez que les parenthèses doivent être exactement comme ça.
    • +1 mais un heads-up pour les gens comme moi pour qui commencent paramètre n'a pas de travail. begin paramètre a été introduit après la version 1.4.X. Dans mon cas, j'ai été en utilisant Angulaire 1.3.14 et m'a pris quelques heures pour comprendre ce qui n'allait pas :/ Référence de lien
    InformationsquelleAutor user1111
  2. 2

    Vous pouvez accéder à l'filtré tableau à l'aide de as alias dans ng-repeat expression

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

    Ensuite utiliser 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>
    • Salut qui ressemble un peu comme ce que je veux. Mais je mon exemple, j'ai displayItems et totalItems. Les éléments d'affichage sont ce que les dix articles que je doit afficher qui sont prises dans le nombre total d'éléments. Je suppose que ce que je fais ici est quelque peu confus. Je suis un filtrage sur les displayItems, alors que je devrais vraiment être filtrage sur le totalItems. Je pense que j'ai besoin de faire le filtrage à l'intérieur d'une fonction dans le contrôleur. Permettez-moi de modifier la question pour en tenir compte.....
    • Créer simple plunker démo. J'ai remarqué que les différents tableaux, mais n a pas assez de code montrant de les trier
    • J'ai mis à jour la question avec un plnkr et édité pour plus de clarté...
    • Qui ne fonctionne pas comme il seulement les filtres de la displayItems. pour créer le filteredArray. c'est à dire. si nous avons 20 totalItems, nous avons deux pages, chacun utilise displayItems pour montrer à 10 éléments. Nous avons besoin de filtrer le 20, pour nous donner 4, dire. Dans votre exemple, vous êtes un filtrage du 10 actuellement affichée, pas le montant total.
    InformationsquelleAutor charlietfl
  3. -2

    Veuillez Changement de Ce type, Mais si vous recherchez seulement un domaine lié pourquoi vous recherche spécifique. qui n'est pas nécessaire si vous avez plus de terrain, puis vous rendre . C'est votre code dans certains modifier j'espère assurer qu'il fonctionne.

    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myModule" ng-controller="myController">

    <input type="text" class="form-control advertise-filter-input sharp-corners"
      placeholder="Filter..." ng-model="filterText">

    <ul>

          <li ng-repeat="item in filterData = (displayItems | filter :  filterText)">
              <div>{{item.itemName}}</div>
      </li>

    </ul>

    <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>

  </body>

</html>
    InformationsquelleAutor VjyV