Heim > Web-Frontend > js-Tutorial > Wie filtere ich mehrere Werte mit ODER-Verknüpfung in AngularJS?

Wie filtere ich mehrere Werte mit ODER-Verknüpfung in AngularJS?

Barbara Streisand
Freigeben: 2024-11-02 13:08:02
Original
655 Leute haben es durchsucht

How to Filter Multiple Values with OR Operation in AngularJS?

Filtern mehrerer Werte mit ODER-Verknüpfung in AngularJS

AngularJS bietet einen leistungsstarken Filtermechanismus, mit dem Sie Daten nach bestimmten Kriterien filtern können. Das Filtern nach mehreren Werten mithilfe der vereinfachten ODER-Operation kann jedoch eine Herausforderung sein.

Stellen Sie sich vor, Sie haben ein Objekt, das einen Film mit der Eigenschaft „Genres“ darstellt. Um nach Filmen im Genre „Action“ oder „Komödie“ zu filtern, könnten Sie versucht sein, einen Filterausdruck wie diesen zu verwenden:

{genres: 'Action'} || {genres: 'Comedy'}
Nach dem Login kopieren

Dieser Ansatz funktioniert jedoch nicht für die dynamische Filterung. Angenommen, Sie möchten basierend auf einem Array von Genres filtern, die in $scope.genresToFilter gespeichert sind. In diesem Fall benötigen Sie eine flexiblere Lösung.

Erstellen eines benutzerdefinierten Filters

Die bevorzugte Lösung besteht darin, einen benutzerdefinierten AngularJS-Filter zu erstellen. So können Sie es machen:

angular.module('myFilters', []).filter('bygenre', function() {
  return function(movies, genres) {
    var out = [];
    // Implement your filtering logic here
    return out;
  }
});
Nach dem Login kopieren

Verwenden Sie in Ihrer HTML-Vorlage Ihren benutzerdefinierten Filter wie folgt:

<ul>
  <li ng-repeat="movie in movies | bygenre:genresToFilter">{{movie.title}}: {{movie.genre}}</li>
</ul>
Nach dem Login kopieren

Jetzt können Sie genresToFilter dynamisch ändern, um die angezeigten Filme basierend zu filtern auf die gewünschten Genres. Dieser Ansatz ist viel vielseitiger als die Verwendung eines statischen Filterausdrucks.

Das obige ist der detaillierte Inhalt vonWie filtere ich mehrere Werte mit ODER-Verknüpfung in AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage