Eval() を使用せずに AngularJS で複数の値をフィルタリングする方法は?

AngularJS での複数の値のフィルタリング

AngularJS には強力なフィルタ機能がありますが、論理 OR 演算子を使用した複数の値のフィルタリングは複雑になる場合があります。危険な可能性がある eval() 呼び出しに頼ることなく、複数の値を動的にフィルタリングする方法を見てみましょう。

動的な複数値のフィルタリングを実現するには、カスタム フィルタを作成することをお勧めします。フィルターは簡単に作成でき、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;
    }
  });

「bygenre」という名前のこのカスタム フィルターは、次の 2 つのパラメーターを受け取ります: 映画 (フィルターされるデータ)およびジャンル (フィルタリングするジャンルの配列)。フィルターは、指定されたジャンルに対して各映画をチェックし、いずれかのジャンルに一致する映画のみを含む新しい配列を返します。

テンプレートでは、このカスタム フィルターを次のように使用できます。

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

このテンプレートは、ジャンルごとにチェックボックスを作成し、フィルタリングするジャンルを動的に選択できるようにします。チェックボックスを切り替えると、映画がフィルタリングされ、選択したジャンルに一致するものだけが表示されます。

このアプローチは、AngularJS で動的にデータをフィルタリングする柔軟かつ安全な方法を提供し、複数の値を簡単に検索できるようにします。パフォーマンスまたはセキュリティが侵害される。

以上がEval() を使用せずに AngularJS で複数の値をフィルタリングする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。