Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menapis untuk Berbilang Nilai dengan Penapis AngularJS?

Bagaimana untuk Menapis untuk Berbilang Nilai dengan Penapis AngularJS?

Patricia Arquette
Patricia Arquetteasal
2024-11-03 14:31:30932semak imbas

How to Filter for Multiple Values with AngularJS Filters?

Menapis untuk Berbilang Nilai dengan Penapis AngularJS

Dalam AngularJS, anda boleh menggunakan penapis untuk memperhalusi data, seperti memilih filem berdasarkan berbilang genre. Jika anda mempunyai struktur objek dengan sifat genre, anda mungkin mahu menapis filem yang tergolong dalam genre "Aksi" atau "Komedi".

Pendekatan Penapis Tersuai

Pertimbangkan untuk membuat tersuai penapis, yang agak mudah. Tentukan penapis anda seperti berikut:

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

Penggunaan Templat

Dalam templat anda, anda boleh memasukkan penapis tersuai anda seperti ini:

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

Pembolehubah Penapis Dinamik

Untuk menapis secara dinamik berdasarkan tatasusunan genre dalam skop anda, anda boleh menetapkan pembolehubahX seperti berikut:

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

Ini membolehkan anda menggunakan penapis secara dinamik berdasarkan nilai dalam tatasusunan .

Contoh

Berikut ialah contoh biola yang menunjukkan pendekatan: https://jsfiddle.net/s39pazfg/

Atas ialah kandungan terperinci Bagaimana untuk Menapis untuk Berbilang Nilai dengan Penapis AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn