Wie filtere ich nach mehreren Werten in AngularJS ohne Eval()?

Mehrere Werte in AngularJS filtern

AngularJS bietet eine leistungsstarke Filterfunktion, aber das Filtern nach mehreren Werten mithilfe des logischen ODER-Operators kann komplex sein. Lassen Sie uns untersuchen, wie Sie dynamisch nach mehreren Werten filtern können, ohne auf potenziell gefährliche eval()-Aufrufe zurückgreifen zu müssen.

Um eine dynamische Filterung mehrerer Werte zu erreichen, empfehlen wir die Erstellung eines benutzerdefinierten Filters. Filter sind einfach zu erstellen und bieten eine sichere und effiziente Möglichkeit, die Filterfunktionen von AngularJS zu erweitern.

<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;
    }
  });

Dieser benutzerdefinierte Filter mit dem Namen „bygenre“ benötigt zwei Parameter: Filme (die zu filternden Daten) und Genres (die Reihe der Genres, nach denen gefiltert werden soll). Der Filter vergleicht jeden Film mit den angegebenen Genres und gibt ein neues Array zurück, das nur die Filme enthält, die einem der Genres entsprechen.

In der Vorlage können wir diesen benutzerdefinierten Filter wie folgt verwenden:

<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>

Diese Vorlage erstellt für jedes Genre ein Kontrollkästchen, sodass Sie dynamisch auswählen können, nach welchen Genres gefiltert werden soll. Wenn Sie die Kontrollkästchen aktivieren, werden die Filme gefiltert, um nur diejenigen anzuzeigen, die den ausgewählten Genres entsprechen.

Dieser Ansatz bietet eine flexible und sichere Möglichkeit, Daten dynamisch in AngularJS zu filtern, sodass Sie problemlos nach mehreren Werten suchen können, ohne Beeinträchtigung der Leistung oder Sicherheit.

Das obige ist der detaillierte Inhalt vonWie filtere ich nach mehreren Werten in AngularJS ohne Eval()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!