Wie filtere ich Daten in AngularJS mithilfe mehrerer Werte (ODER-Operation)?

Filtern mehrerer Werte (ODER-Verknüpfung) in AngularJS

In AngularJS ist das Filtern von Daten eine wesentliche Aufgabe, um Benutzern maßgeschneiderte Inhalte anzuzeigen. Wenn Sie jedoch Daten auf der Grundlage mehrerer Kriterien filtern müssen, kann das Ausdrücken einer ODER-Verknüpfung eine Herausforderung darstellen.

Für diese Aufgabe müssen Sie ein Objekt auf der Grundlage mehrerer Werte filtern. Betrachten Sie einen Objektfilm mit einer Genres-Eigenschaft und Sie möchten Filme anzeigen, die entweder zur Kategorie „Action“ oder „Komödie“ gehören.

Bei Verwendung von filter:({genres: 'Action'} || { Genres: „Comedy“}) möglich ist, wird es umständlich, wenn Sie dynamisch basierend auf einer Variablen filtern möchten. So können Sie dieses Problem angehen:

Benutzerdefinierte Filterfunktion

Eine bessere Lösung besteht darin, eine benutzerdefinierte Filterfunktion zu erstellen. Benutzerdefinierte Filter bieten einen besser organisierten und wartbareren Ansatz. Sie können in Ihrer AngularJS-Anwendung einen Filter mit dem Namen „bygenre“ wie folgt definieren:

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

Vorlagenverwendung

Sobald Sie den benutzerdefinierten Filter definiert haben, können Sie ihn wie folgt in Ihrer Vorlage verwenden:

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

In der Vorlage können Sie das Kontrollkästchen „Genrefilter“ umschalten, um die Filterkriterien dynamisch zu ändern. Der benutzerdefinierte Filter zeigt automatisch Filme an, die einem der ausgewählten Genres entsprechen.

Weitere Informationen

Weitere Informationen zum Erstellen benutzerdefinierter AngularJS-Filter finden Sie in der offiziellen Dokumentation hier: [Angularfilter erstellen] (https://docs.angularjs.org/guide/filter).

Das obige ist der detaillierte Inhalt vonWie filtere ich Daten in AngularJS mithilfe mehrerer Werte (ODER-Operation)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!