web-dev-qa-db-fra.com

Comment filtrer une liste dans AngularJs en utilisant plusieurs liens

Je vis sur de nombreux tutoriels sur la manière de filtrer une liste et je ne trouve pas d'exemple pour mon cas 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 cliquerai sur l'un des boutons la liste sera filtrée?

J'ai essayé d'ajouter ng-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 puis-je connecter les liens vers le filtre?

javascripthtmlfilterangularjs
21
Alon

Vous pouvez lier votre filtre à la portée des variables comme vous le faites avec une autre chose. Donc, tout ce dont vous avez besoin est de définir le filtre approprié dans la portée lorsque l'utilisateur cliquez et liez-le à la 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
Caio Cunha

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

Dans ma répétition NG, j'ai un filtre de recherche qui traverse les mots. Je voulais que les onglets recherchent un match 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 suis capable d'ajouter un clic NG qui passe à MyFilter et recherche le TD avec boisson. Nom. Nom. Dans chaque ng-clic, je peux définir la valeur du nom sur la recherche. Donc, chaque titre contenant du soda ou de l'énergie peut être filtré à travers.

1
Winnemucca