Comment filtrer les données dans AngularJS à l'aide de plusieurs valeurs (opération OU) ?

Filtrage de plusieurs valeurs (opération OU) dans AngularJS

Dans AngularJS, le filtrage des données est une tâche essentielle pour afficher un contenu personnalisé aux utilisateurs. Cependant, lorsque vous devez filtrer des données en fonction de plusieurs critères, exprimer une opération OU peut s'avérer difficile.

Cette tâche vous oblige à filtrer un objet en fonction de plusieurs valeurs. Considérons un film objet avec une propriété de genre et vous souhaitez afficher des films appartenant aux catégories « Action » ou « Comédie ».

Lors de l'utilisation du filtre :({genres : 'Action'} || { genres : 'Comédie'}) est possible, cela devient fastidieux lorsque l'on souhaite filtrer dynamiquement en fonction d'une variable. Voici comment aborder ce problème :

Fonction de filtre personnalisée

Une meilleure solution consiste à créer une fonction de filtre personnalisée. Les filtres personnalisés offrent une approche plus organisée et maintenable. Vous pouvez définir un filtre nommé par genre dans votre application AngularJS comme suit :

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

Utilisation du modèle

Une fois que vous avez défini le filtre personnalisé, vous pouvez l'utiliser dans votre modèle comme suit :

<code class="html">&lt;h1 ng-init=&quot;movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];&quot;&gt;Movies&lt;/h1&gt;
&lt;input type=&quot;checkbox&quot; ng-model=&quot;genrefilters.action&quot; /&gt;Action
&lt;br&gt;
&lt;input type=&quot;checkbox&quot; ng-model=&quot;genrefilters.family&quot; /&gt;Family
&lt;br&gt;
{{genrefilters.action}}::{{genrefilters.family}}
&lt;ul&gt;
    &lt;li ng-repeat=&quot;movie in movies | bygenre:genrefilters&quot;&gt;{{movie.title}}: {{movie.genre}}&lt;/li&gt;
&lt;/ul&gt;</code>

Dans le modèle, vous pouvez cocher la case genrefilters pour modifier dynamiquement les critères de filtre. Le filtre personnalisé affichera automatiquement les films qui correspondent à l'un des genres sélectionnés.

Exploration plus approfondie

Pour plus d'informations sur la création de filtres AngularJS personnalisés, reportez-vous à la documentation officielle ici : [Création de filtres angulaires] (https://docs.angularjs.org/guide/filter).

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!