AngularJS フィルターを使用して複数の値をフィルターするにはどうすればよいですか?

AngularJS フィルターを使用した複数の値のフィルター処理

AngularJS では、複数のジャンルに基づいて映画を選択するなど、フィルターを利用してデータを絞り込むことができます。ジャンル プロパティを含むオブジェクト構造がある場合は、「アクション」または「コメディ」ジャンルに属する映画をフィルタリングすることをお勧めします。

カスタム フィルタのアプローチ

カスタム フィルタの作成を検討してください。フィルターは比較的簡単です。次のようにフィルターを定義します:

<code class="javascript">angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies, genres) {
      var out = [];
      // Implement your filtering logic here, adding matches to the out variable.
      return out;
    }
  });</code>

テンプレートの使用法

テンプレートでは、次のようにカスタム フィルターを組み込むことができます:

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

動的フィルター変数

スコープ内のジャンルの配列に基づいて動的にフィルタリングするには、次のように variableX 変数を設定できます。

<code class="javascript">$scope.variableX = {genres: ['Action', 'Comedy']};</code>

これにより、配列内の値に基づいてフィルタを動的に適用できます。 .

例

このアプローチを示すフィドルの例を次に示します: https://jsfiddle.net/s39pazfg/

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