Maison >interface Web >js tutoriel >Comment filtrer plusieurs valeurs avec les filtres AngularJS ?

Comment filtrer plusieurs valeurs avec les filtres AngularJS ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-03 14:31:30938parcourir

How to Filter for Multiple Values with AngularJS Filters?

Filtrage de plusieurs valeurs avec les filtres AngularJS

Dans AngularJS, vous pouvez utiliser des filtres pour affiner les données, par exemple en sélectionnant des films en fonction de plusieurs genres. Si vous disposez d'une structure d'objet avec une propriété de genres, vous souhaiterez peut-être filtrer les films appartenant aux genres « Action » ou « Comédie ».

Approche de filtre personnalisé

Envisagez de créer un filtre personnalisé filtre, ce qui est relativement simple. Définissez votre filtre comme suit :

<code class="javascript">angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies, genres) {
      var out = [];
      // Implement your filtering logic here, adding matches to the out variable.
      return out;
    }
  });</code>

Utilisation du modèle

Dans votre modèle, vous pouvez incorporer votre filtre personnalisé comme ceci :

<code class="html"><ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul></code>

Variable de filtre dynamique

Pour filtrer dynamiquement en fonction d'un tableau de genres dans votre champ d'application, vous pouvez définir la variable variableX comme suit :

<code class="javascript">$scope.variableX = {genres: ['Action', 'Comedy']};</code>

Cela vous permet d'appliquer le filtre de manière dynamique en fonction des valeurs du tableau. .

Exemple

Voici un exemple de violon qui démontre l'approche : https://jsfiddle.net/s39pazfg/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn