Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menapis Data dalam AngularJS Menggunakan Berbilang Nilai (OR Operasi)?

Bagaimana untuk Menapis Data dalam AngularJS Menggunakan Berbilang Nilai (OR Operasi)?

Barbara Streisand
Lepaskan: 2024-11-04 04:40:02
asal
384 orang telah melayarinya

How to Filter Data in AngularJS Using Multiple Values (OR Operation)?

Menapis Berbilang Nilai (OR Operasi) dalam AngularJS

Dalam AngularJS, menapis data ialah tugas penting untuk memaparkan kandungan yang disesuaikan kepada pengguna. Walau bagaimanapun, apabila anda perlu menapis data berdasarkan berbilang kriteria, menyatakan operasi ATAU boleh menjadi mencabar.

Tugas ini memerlukan anda menapis objek berdasarkan berbilang nilai. Pertimbangkan filem objek dengan sifat genre dan anda mahu memaparkan filem yang tergolong dalam kategori "Aksi" atau "Komedi".

Semasa menggunakan penapis:({genre: 'Action'} || { genres: 'Komedi'}) adalah mungkin, ia menjadi menyusahkan apabila anda ingin menapis secara dinamik berdasarkan pembolehubah. Begini cara anda boleh menangani isu ini:

Fungsi Penapis Tersuai

Penyelesaian yang lebih baik ialah mencipta fungsi penapis tersuai. Penapis tersuai menyediakan pendekatan yang lebih teratur dan boleh diselenggara. Anda boleh mentakrifkan penapis bernama bygenre dalam aplikasi AngularJS anda seperti berikut:

<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>
Salin selepas log masuk

Penggunaan Templat

Setelah anda menentukan penapis tersuai, anda boleh menggunakannya dalam templat anda seperti berikut:

<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>
Salin selepas log masuk

Dalam templat, anda boleh menogol kotak pilihan penapis genre untuk menukar kriteria penapis secara dinamik. Penapis tersuai secara automatik akan memaparkan filem yang sepadan dengan mana-mana genre yang dipilih.

Penerokaan Lanjut

Untuk mendapatkan maklumat lanjut tentang mencipta penapis AngularJS tersuai, rujuk dokumentasi rasmi di sini: [Mencipta Penapis Sudut] (https://docs.angularjs.org/guide/filter).

Atas ialah kandungan terperinci Bagaimana untuk Menapis Data dalam AngularJS Menggunakan Berbilang Nilai (OR Operasi)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan