AngularJS の複数の値に基づいてデータを効率的にフィルタリングするにはどうすればよいですか?

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

AngularJS は、テンプレートに表示されるデータを絞り込むための強力なフィルタリング メカニズムを提供します。ただし、|| を使用して複数の値をフィルタリングすることはできません。動的フィルターを使用する場合、演算子は煩雑で柔軟性がなくなる可能性があります。この記事では、カスタム フィルターを使用したより洗練されたソリューションについて説明します。

複数値フィルタリング用のカスタム フィルター

フィルター式を動的に操作する代わりに、これを処理するカスタム フィルターを作成します。論理。カスタム フィルターを使用すると、独自のフィルター関数を定義できます。以下に例を示します。

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

      // Apply filtering logic here

      return matches;
    }
  });</code>

ジャンル別フィルターは、フィルター対象のオブジェクトの配列である映画と、フィルター対象のジャンルの配列であるジャンルの 2 つのパラメーターを取ります。この関数は、映画配列をループし、各映画のジャンルがジャンル配列内のいずれかのジャンルと一致するかどうかを確認し、一致配列に一致を追加します。最後に、一致する配列がフィルター処理された結果として返されます。

フィルターの適用

テンプレートで、| を指定した ng-repeat ディレクティブを使用します。フィルターを適用する bygenre パイプ:

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

動的フィルター値

上記の HTML コードでは、genrefilters はフィルター対象のジャンルを指定するオブジェクトです。コントローラ内のこのオブジェクトを動的に更新して、動的フィルタリングを実現できます。たとえば、次のコードはチェックボックスを使用して、ジャンルフィルター オブジェクトを設定します。

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

チェックボックスを切り替えると、ジャンルフィルター オブジェクトが更新され、ジャンル別フィルターが新しいフィルター条件を自動的に適用します。

このアプローチは、AngularJS の複数の値に基づいてデータをフィルターするクリーンかつ柔軟な方法を提供し、フィルター基準が変更される可能性があるシナリオに特に適しています。

以上がAngularJS の複数の値に基づいてデータを効率的にフィルタリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。