如何在 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>

bygenre 過濾器採用兩個參數：movies（要過濾的物件陣列）和genres（要過濾的流派陣列）。此函數循環存取電影數組，檢查每部電影的類型是否與類型數組中的任何類型匹配，並將匹配項添加到 matches 數組中。最後，匹配數組作為過濾結果傳回。

套用過濾器

在範本中，使用帶有 | 的 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中文網其他相關文章！