Question Comment filtrer une liste dans AngularJS en utilisant plusieurs liens


J'ai parcouru beaucoup de tutoriels sur la façon de filtrer une liste et je ne trouve pas d'exemple pour mon cas d'utilisation simple.

J'ai plusieurs boutons tels que

<a href="#" id="filter-by-name">Name</a>
<a href="#" id="filter-by-age">Age</a>
<a href="#" id="filter-by-height">Height</a>

j'ai var persons = {...} objet et je l'affiche comme

<div ng-repeat="person in persons">
  {{person.name...}}
</div>

Comment créer un filtre pour chaque fois que je clique sur l'un des boutons, la liste sera filtrée?

J'ai essayé d'ajouterng-repeat="person in persons | filter:filterPersons" et du côté du script pour écrire:

$scope.filterPersons(person){
  if (person.name == "John")
    return person;
}

mais ce n'est qu'un cas d'utilisation (comment puis-je filtrer par un autre nom?) - en d'autres termes - Comment connecter les liens au filtre?


21
2018-01-17 13:13


origine


Réponses:


Vous pouvez lier votre filtre aux variables de portée comme vous le faites avec n'importe quelle autre chose. Il vous suffit donc de définir le filtre approprié sur l’étendue lorsque l’utilisateur clique sur le ng-repeat filtre param. Voir:

<div ng-app>
  <span ng-click="myFilter = {type: 1}">Type 1</span> | 
  <span ng-click="myFilter = {type: 2}">Type 2</span> |
  <span ng-click="myFilter = null">No filter</span>
  <ul ng-controller="Test">
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
  </ul>
</div>
function Test($scope) {
  $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}];
}

Notez que le myFilter est modifié lorsque l'utilisateur clique sur le filtre et qu'il est lié au ng-repeat filtre. Violon ici. Vous pouvez également créer un nouveau filtre, mais cette solution est bien meilleure.


37
2018-01-17 14:21



Ma réponse est très similaire à celle de Caio. Je voulais juste montrer comment filtrer un tableau existant.

Dans mon ng-repeat, j'ai un filtre de recherche qui parcourt les mots. Je voulais que les onglets recherchent une correspondance de chaîne. J'ai donc ajouté un filtre supplémentaire

 <tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter">
    <td>[[drink.name]]</td>

Je n'ai que la partie supérieure de ma table mais cela devrait montrer la stratégie. Le deuxième filtre appelé myFilter est attaché aux boutons ci-dessous.

<div class="btn-group" role="group">
   <button type="button" class="btn btn-primary" ng-click="myFilter={name:'soda'}">Soda</button>
</div>
<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'energy'}">Energy Drinks</button>
</div>

Sur chaque bouton, je peux ajouter un ng-click qui traverse myFilter et recherche le td avec drink.name. Dans chaque ng-clic, je peux définir la valeur du nom à rechercher. Ainsi, chaque titre contenant de la soude ou de l'énergie peut être filtré.


1
2017-07-03 16:56