Bagaimanakah saya boleh menapis data dengan cekap berdasarkan berbilang nilai dalam AngularJS?

Menapis Berbilang Nilai dalam AngularJS

AngularJS menyediakan mekanisme penapisan yang berkuasa untuk memperhalusi data yang dipaparkan dalam templat anda. Walau bagaimanapun, menapis untuk berbilang nilai menggunakan || pengendali boleh menjadi rumit dan tidak fleksibel apabila bekerja dengan penapis dinamik. Artikel ini meneroka penyelesaian yang lebih elegan menggunakan penapis tersuai.

Penapis Tersuai untuk Penapisan Berbilang Nilai

Daripada memanipulasi ungkapan penapis secara dinamik, buat penapis tersuai yang mengendalikan perkara ini logik. Penapis tersuai membolehkan anda menentukan fungsi penapisan anda sendiri. Berikut ialah contoh:

<code class="javascript">angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies, genres) {
      const matches = [];

      // Apply filtering logic here

      return matches;
    }
  });</code>

Penapis mengikutgenre mengambil dua parameter: filem, susunan objek yang akan ditapis dan genre, susunan genre untuk ditapis. Fungsi menggelung melalui tatasusunan filem, menyemak sama ada genre setiap filem sepadan dengan mana-mana genre dalam tatasusunan genre dan menambah padanan pada tatasusunan padanan. Akhirnya, tatasusunan padanan dikembalikan sebagai hasil yang ditapis.

Menggunakan Penapis

Dalam templat anda, gunakan arahan ng-ulang dengan | paip bygenre untuk menggunakan penapis:

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

Nilai Penapis Dinamik

Dalam kod HTML di atas, penapis genre ialah objek yang menentukan genre untuk ditapis. Anda boleh mengemas kini objek ini secara dinamik dalam pengawal anda untuk mencapai penapisan dinamik. Sebagai contoh, kod berikut menggunakan kotak pilihan untuk menetapkan objek penapis genre:

<code class="html"><input type="checkbox" ng-model="genrefilters.action" /> Action
<br>
<input type="checkbox" ng-model="genrefilters.family" /> Family</code>

Apabila kotak pilihan ditogol, objek penapis genre dikemas kini dan penapis mengikutgenre secara automatik menggunakan kriteria penapisan baharu.

Pendekatan ini menyediakan cara yang bersih dan fleksibel untuk menapis data berdasarkan berbilang nilai dalam AngularJS, menjadikannya sangat sesuai untuk senario di mana kriteria penapis tertakluk kepada perubahan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menapis data dengan cekap berdasarkan berbilang nilai dalam AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!