Heim > Web-Frontend > js-Tutorial > Wie filtere ich mit AngularJS-Filtern nach mehreren Werten?

Wie filtere ich mit AngularJS-Filtern nach mehreren Werten?

Patricia Arquette
Freigeben: 2024-11-03 14:31:30
Original
937 Leute haben es durchsucht

How to Filter for Multiple Values with AngularJS Filters?

Filtern nach mehreren Werten mit AngularJS-Filtern

In AngularJS können Sie Filter verwenden, um Daten zu verfeinern, beispielsweise um Filme basierend auf mehreren Genres auszuwählen. Wenn Sie eine Objektstruktur mit einer Genres-Eigenschaft haben, möchten Sie möglicherweise nach Filmen filtern, die zu den Genres „Action“ oder „Komödie“ gehören.

Benutzerdefinierter Filteransatz

Erwägen Sie die Erstellung eines benutzerdefinierten Filters Filter, was relativ einfach ist. Definieren Sie Ihren Filter wie folgt:

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

Vorlagenverwendung

In Ihre Vorlage können Sie Ihren benutzerdefinierten Filter wie folgt integrieren:

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

Dynamische Filtervariable

Um dynamisch basierend auf einem Array von Genres in Ihrem Bereich zu filtern, können Sie die Variable variableX wie folgt festlegen:

<code class="javascript">$scope.variableX = {genres: ['Action', 'Comedy']};</code>
Nach dem Login kopieren

Dadurch können Sie den Filter dynamisch basierend auf den Werten im Array anwenden .

Beispiel

Hier ist eine Beispielgeige, die den Ansatz demonstriert: https://jsfiddle.net/s39pazfg/

Das obige ist der detaillierte Inhalt vonWie filtere ich mit AngularJS-Filtern nach mehreren Werten?. 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