如何在 angularJS 中过滤多个值（OR 操作）

javascript angularjs angularjs-ng-repeat

2022-08-30 04:19:16

我想使用 in angular 并希望过滤多个值，如果它具有其中一个值，则应显示它。filter

例如，我有这个结构：

具有属性的对象，我想筛选和。moviegenresActionComedy

我知道我可以做到，但是如果我想动态过滤它，该怎么办。例如：filter:({genres: 'Action'} || {genres: 'Comedy'})filter: variableX

当我有一组必须过滤的类型时，如何设置？variableX$scope

我可以把它构造成一个字符串，然后做一个，但我不想使用eval（）...eval()

答案 1

我只会创建一个自定义过滤器。它们并不难。

angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies,genres) {
      var out = [];
      // Filter logic here, adding matches to the out var.
      return out;
    }
  });

模板：

<h1>Movies</h1>

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];" />
<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>

编辑这里是链接：创建角度过滤器

更新：这是一个小提琴，有我的建议的精确演示。

答案 2

您可以使用控制器函数进行筛选。

function MoviesCtrl($scope) {

    $scope.movies = [{name:'Shrek', genre:'Comedy'},
                     {name:'Die Hard', genre:'Action'},
                     {name:'The Godfather', genre:'Drama'}];

    $scope.selectedGenres = ['Action','Drama'];

    $scope.filterByGenres = function(movie) {
        return ($scope.selectedGenres.indexOf(movie.genre) !== -1);
    };

}

网页：

<div ng-controller="MoviesCtrl">
    <ul>
        <li ng-repeat="movie in movies | filter:filterByGenres">
            {{ movie.name }} {{ movie.genre }}
        </li>
    </ul>
</div>