Comment filtrer plusieurs valeurs dans AngularJS sans Eval() ?

Filtrage de plusieurs valeurs dans AngularJS

AngularJS fournit une fonctionnalité de filtre puissante, mais le filtrage de plusieurs valeurs à l'aide de l'opérateur logique OU peut être complexe. Explorons comment filtrer dynamiquement plusieurs valeurs sans recourir à des appels eval() potentiellement dangereux.

Pour obtenir un filtrage dynamique à valeurs multiples, nous vous recommandons de créer un filtre personnalisé. Les filtres sont faciles à créer et constituent un moyen sûr et efficace d'étendre les capacités de filtrage d'AngularJS.

<code class="javascript">angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies, genres) {
      var out = [];
      for (var i = 0; i < movies.length; i++) {
        var movie = movies[i];
        if (genres.indexOf(movie.genre) !== -1) {
          out.push(movie);
        }
      }
      return out;
    }
  });

Ce filtre personnalisé, nommé « par genre », prend deux paramètres : les films (les données à filtrer) et genres (la gamme de genres à filtrer). Le filtre vérifie chaque film par rapport aux genres spécifiés et renvoie un nouveau tableau contenant uniquement les films qui correspondent à l'un des genres.

Dans le modèle, nous pouvons utiliser ce filtre personnalisé comme ceci :

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

Ce modèle crée une case à cocher pour chaque genre, vous permettant de sélectionner dynamiquement les genres à filtrer. Lorsque vous cochez les cases, les films sont filtrés pour afficher uniquement ceux qui correspondent aux genres sélectionnés.

Cette approche fournit un moyen flexible et sécurisé de filtrer les données de manière dynamique dans AngularJS, vous permettant de rechercher facilement plusieurs valeurs sans compromettre les performances ou la sécurité.

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!