Bagaimana untuk Menapis Berbilang Nilai dalam AngularJS tanpa Eval()?

Menapis Berbilang Nilai dalam AngularJS

AngularJS menyediakan ciri penapis yang berkuasa, tetapi penapisan untuk berbilang nilai menggunakan operator OR logik boleh menjadi rumit. Mari terokai cara menapis berbilang nilai secara dinamik tanpa menggunakan panggilan eval() yang berpotensi berbahaya.

Untuk mencapai penapisan berbilang nilai dinamik, kami mengesyorkan anda membuat penapis tersuai. Penapis mudah dibuat dan menyediakan cara yang selamat dan cekap untuk melanjutkan keupayaan penapisan AngularJS.

<code class="javascript">angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies, genres) {
      var out = [];
      for (var i = 0; i < movies.length; i++) {
        var movie = movies[i];
        if (genres.indexOf(movie.genre) !== -1) {
          out.push(movie);
        }
      }
      return out;
    }
  });

Penapis tersuai ini, bernama 'bygenre,' mengambil dua parameter: filem (data yang akan ditapis) dan genre (susunan genre untuk ditapis). Penapis menyemak setiap filem terhadap genre yang ditentukan dan mengembalikan tatasusunan baharu yang mengandungi hanya filem yang sepadan dengan mana-mana genre.

Dalam templat, kita boleh menggunakan penapis tersuai ini seperti:

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

Templat ini mencipta kotak pilihan untuk setiap genre, membolehkan anda memilih genre untuk ditapis secara dinamik. Semasa anda menogol kotak pilihan, filem ditapis untuk memaparkan hanya yang sepadan dengan genre yang dipilih.

Pendekatan ini menyediakan cara yang fleksibel dan selamat untuk menapis data secara dinamik dalam AngularJS, membolehkan anda mencari berbilang nilai dengan mudah tanpa menjejaskan prestasi atau keselamatan.

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