在 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中文網其他相關文章！
