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

Comment filtrer plusieurs valeurs avec les filtres AngularJS ?

Patricia Arquette
Libérer: 2024-11-03 14:31:30
original
960 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal