Dev Faq
7
votes

Utiliser un filtre angulaire avec une pagination

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

Cela fonctionne parfaitement et filtre les éléments parfaitement. Le problème se pose parce que j'utilise des afficheurs avec un élément de pagination UIB. La pagination utilise des nombres totalitems au lieu de displayitems. xxx

évidemment, j'ai besoin d'appliquer le filtre sur les éléments totaux, puis créez les affichages et mettez les filtres dans l'UIB- pagination.

IE. Lorsque la personne Type, dans le contrôleur, le filtre est appliqué sur le totalItems, et je crée les filtres nécessaires à la pagination. Je crée également les afficheurs à partir des filtresItems. Comment puis-je continuer à mettre cela dans le contrôleur et non dans le HTML pour la répétition NG?

Je ne sais pas comment faire cela. Des pensées? Tout aidez beaucoup apprécié ....

J'ai inclus un plumbeur pour le montrer (non) travaillant dans toute sa gloire .... https://plnkr.co/edit/eyx6Zo1795SD9X6ZO1795SD9X6Z2J8U?p=preview

3 commentaires

Changer Total-Éléments à: Total-Éléments = "filtereditems.length" .

Rendre les articles totaux à FilteredItems dans le contrôleur - Comment créer ces éléments filtrés est la question?

Essaye ça. PLNKR.CO/EDIT/9DIYQ1FDTORI5KKMITDDDORI5KKMITDDDOFP=PREVIEW

5 Réponses :

3
votes

Vous pouvez accéder à la matrice filtrée à l'aide de comme alias dans ng-répéter expression xxx

puis utilisez cet alias pour Articles totaux en pagination xxx

3 commentaires

Salut ça a l'air un peu comme ce que je veux. Mais mon exemple que j'ai des écrans et un totalitems. Les éléments d'affichage sont tous les dix éléments que je devrais afficher, qui sont extraits du total des éléments. Je suppose que ce que je fais ici est un peu confus. Je filtrant sur les afficheurs, alors que je devrais vraiment filtrer sur le totalitems. Je pense que je dois faire le filtrage dans une fonction dans le contrôleur. Laissez-moi éditer la question pour refléter ceci .....

Créez une démonstration simple Plunker. J'ai remarqué des tableaux différents mais je ne fais pas assez de code montrant pour les résoudre

Cela ne fonctionne pas car il ne filtre que les afficheurs. créer le filteredarray. c'est à dire. Si nous avons 20 totalitems, nous avons deux pages, chacun utilise des afficheurs pour montrer 10 articles. Nous devons filtrer le 20, pour nous donner 4, disons. Dans votre exemple, vous filtrez le 10 en cours d'exécution, pas le montant total.

-2
votes

Veuillez modifier ce type, mais si vous recherchez un seul champ connecté pourquoi vous recherchez spécifique. Cela pas besoin de si vous avez plus de champ, alors vous le faites. C'est votre code dans certains modifier, j'espère que cela 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>

0 commentaires
33
votes

Essayez,

HTML, P> 

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

4 commentaires

Cheers - C'est exactement ce que je cherchais!

Génial, ça a fonctionné parfait pour moi sur Ui-bootstrap-tpls-2.1.4.min

Wow, je n'ai jamais vu personne d'utiliser le filteredData = ... dans le NG-REPEAT . C'est incroyable. Notez que les crochets doivent être exactement comme ça pour travailler.

+1 Mais une tête pour des gens comme moi pour qui le paramètre de départ ne fonctionnait pas. Commencer le paramètre n'a été introduit qu'après la version 1.4.x. Dans mon cas, j'utilisais l'angulaire 1.3.14 et m'a pris quelques heures pour comprendre ce qui n'allait pas: / lien de référence

0
votes

C'est ce que j'ai fait pour le faire fonctionner: 

    <table >
      <thead>
        <tr>
          <th>Name</th>
          <th>ID</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="obj in filterData | filter : paginate ">
          <td>{{obj.name}}</td>
          <td>{{obj.id}}</td>

        </tr>
      </tbody>
    </table>

     <ul uib-pagination total-items="totalItems" ng-model="currentPage"  max-size="5" boundary-links="true" items-per-page="numPerPage" ></ul>

</div>

0 commentaires
0
votes

Ici, je fournis une solution avec ngx-pagination xxx

0 commentaires

Articles qui pourrait vous intéresser :

Recherche d'un div dans une vue AngualrJS ui-router, en utilisant document.querySelector
Problème avec la visibilité des options dans ui-select + parent div a overflow-x pour faire défiler
Rapporteur: Erreur lors de l'attente de la synchronisation de Protractor avec la page: "La testabilité angularJS et la testabilité angulaire ne sont pas définies
Comment utiliser correctement AngularJS $ http.post pour mettre à jour la table MySQLi via PHP?