如何在 AngularJS 中使用多個值（OR 運算）過濾資料？

在 AngularJS 中過濾多個值（OR 運算）

在 AngularJS 中，過濾資料是向使用者顯示客製化內容的一項基本任務。但是，當您需要根據多個條件過濾資料時，表達 OR 運算可能會很困難。

此任務要求您根據多個值過濾物件。考慮一個具有流派屬性的物件電影，並且您想要顯示屬於“動作”或“喜劇”類別的電影。

使用篩選器時:({genres: 'Action'} || { types: 'Comedy'}) 是可能的，但是當您想根據變數動態過濾時，它會變得很麻煩。以下是解決此問題的方法：

自訂過濾器函數

更好的解決方案是建立自訂過濾器函數。自訂過濾器提供了一種更有組織性和可維護性的方法。您可以在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 過濾器的更多信息，請參閱此處的官方文檔：[創建Angular 過濾器] （https://docs.angularjs.org /guide/filter）。

以上是如何在 AngularJS 中使用多個值（OR 運算）過濾資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！