如何在沒有 Eval() 的情況下在 AngularJS 中過濾多個值？

在AngularJS 中過濾多個值

AngularJS 提供了強大的過濾功能，但是使用邏輯OR 運算子過濾多個值可能會很複雜。讓我們探索如何動態過濾多個值，而不訴諸潛在危險的 eval() 呼叫。

要實現動態多值過濾，我們建議建立自訂過濾器。過濾器很容易創建，並提供了一種安全有效的方法來擴展 AngularJS 的過濾功能。

<code class="javascript">angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies, genres) {
      var out = [];
      for (var i = 0; i < movies.length; i++) {
        var movie = movies[i];
        if (genres.indexOf(movie.genre) !== -1) {
          out.push(movie);
        }
      }
      return out;
    }
  });

這個名為「bygenre」的自訂過濾器採用兩個參數：movie（要過濾的資料）和流派（要過濾的流派數組）。該過濾器根據指定的類型檢查每部電影，並傳回僅包含與任何類型相符的電影的新數組。

在模板中，我們可以像這樣使用此自訂過濾器：

<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 中動態過濾數據，使您可以輕鬆搜尋多個值，而無需損害效能或安全性。

以上是如何在沒有 Eval() 的情況下在 AngularJS 中過濾多個值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！