複数の値 (OR 演算) を使用して AngularJS でデータをフィルターする方法?

AngularJS での複数の値のフィルタリング (OR 演算)

AngularJS では、データのフィルタリングは、カスタマイズされたコンテンツをユーザーに表示するために不可欠なタスクです。ただし、複数の基準に基づいてデータをフィルタリングする必要がある場合、OR 演算を表現するのは困難な場合があります。

このタスクでは、複数の値に基づいてオブジェクトをフィルタリングする必要があります。ジャンル プロパティを持つオブジェクト ムービーを考えて、「アクション」または「コメディ」カテゴリのいずれかに属するムービーを表示したいとします。

filter:({genres: 'Action'} || {ジャンル: 'コメディ'}) は可能ですが、変数に基づいて動的にフィルタリングする場合は面倒になります。この問題に対処する方法は次のとおりです。

カスタム フィルター関数

より良い解決策は、カスタム フィルター関数を作成することです。カスタム フィルターは、より組織的で保守しやすいアプローチを提供します。次のように、AngularJS アプリケーションで bygenre という名前のフィルターを定義できます:

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

テンプレートの使用法

カスタム フィルターを定義したら、次のようにテンプレートで使用できます。

<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 フィルターの作成の詳細については、こちらの公式ドキュメントを参照してください: [Creating Angular Filters] (https://docs.angularjs.org/guide/filter).

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