如何在没有 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中文网其他相关文章！