如何过滤angularJS中的多个值(OR操作)

我想在角度中使用filter ,并希望过滤多个值,如果它具有任何一个值,那么它应该显示。

我有这样的结构:

一个有属性genres的对象movie ,我想过滤ActionComedy

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

如何在$scope设置variableX ,当我有一个流派的数组,我必须过滤?

我可以构造它作为一个字符串,然后做一个eval()但我不想使用eval()…

19 Solutions collect form web for “如何过滤angularJS中的多个值(OR操作)”

我只想创建一个自定义过滤器。 他们并不那么辛苦。

 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> 

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

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

您可以使用控制器功能进行过滤。

 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); }; } 

HTML:

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

创建一个自定义的过滤器可能是过度的,你可以传入一个自定义的比较器,如果你有多个值:

 $scope.selectedGenres = "Action, Drama"; $scope.containsComparator = function(expected, actual){ return actual.indexOf(expected) > -1; }; 

然后在过滤器中:

 filter:{name:selectedGenres}:containsComparator 

这里是自定义过滤器的实现,它将使用数组值来过滤数据。它将支持具有数组和单值键的多个键对象。 正如前面提到的AngularJS API AngularJS过滤器Doc支持多个键值过滤器,但是下面的自定义过滤器将支持与angularJS相同的功能,并且还支持key的数组和值的组合。请查找下面的代码片段,

 myApp.filter('filterMultiple',['$filter',function ($filter) { return function (items, keyObj) { var filterObj = { data:items, filteredData:[], applyFilter : function(obj,key){ var fData = []; if (this.filteredData.length == 0) this.filteredData = this.data; if (obj){ var fObj = {}; if (!angular.isArray(obj)){ fObj[key] = obj; fData = fData.concat($filter('filter')(this.filteredData,fObj)); } else if (angular.isArray(obj)){ if (obj.length > 0){ for (var i=0;i<obj.length;i++){ if (angular.isDefined(obj[i])){ fObj[key] = obj[i]; fData = fData.concat($filter('filter')(this.filteredData,fObj)); } } } } if (fData.length > 0){ this.filteredData = fData; } } } }; if (keyObj){ angular.forEach(keyObj,function(obj,key){ filterObj.applyFilter(obj,key); }); } return filterObj.filteredData; } }]); 

用法:

 arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]} 

这里有一个实现上面的“filterMutiple”自定义过滤器的小例子。 :::小提琴示例:::

如果你想过滤阵列的对象,那么你可以给

filter:({genres: 'Action', key :value }.

个人财产将通过为该财产给予特定的过滤器进行过滤。

但是,如果你想要像个人财产过滤和过滤全球所有属性,那么你可以做这样的事情。

 <tr ng-repeat="supp in $data | filter : filterObject | filter : search"> 

我花了一些时间,并感谢@chrismarx,我看到了angular的默认filterFilter允许你传递你自己的比较器。 这里是编辑多个值的比较:

  function hasCustomToString(obj) { return angular.isFunction(obj.toString) && obj.toString !== Object.prototype.toString; } var comparator = function (actual, expected) { if (angular.isUndefined(actual)) { // No substring matching against `undefined` return false; } if ((actual === null) || (expected === null)) { // No substring matching against `null`; only match against `null` return actual === expected; } // I edited this to check if not array if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) { // Should not compare primitives against objects, unless they have custom `toString` method return false; } // This is where magic happens actual = angular.lowercase('' + actual); if (angular.isArray(expected)) { var match = false; expected.forEach(function (e) { e = angular.lowercase('' + e); if (actual.indexOf(e) !== -1) { match = true; } }); return match; } else { expected = angular.lowercase('' + expected); return actual.indexOf(expected) !== -1; } }; 

如果我们想为DRY制作一个自定义过滤器:

 angular.module('myApp') .filter('filterWithOr', function ($filter) { var comparator = function (actual, expected) { if (angular.isUndefined(actual)) { // No substring matching against `undefined` return false; } if ((actual === null) || (expected === null)) { // No substring matching against `null`; only match against `null` return actual === expected; } if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) { // Should not compare primitives against objects, unless they have custom `toString` method return false; } console.log('ACTUAL EXPECTED') console.log(actual) console.log(expected) actual = angular.lowercase('' + actual); if (angular.isArray(expected)) { var match = false; expected.forEach(function (e) { console.log('forEach') console.log(e) e = angular.lowercase('' + e); if (actual.indexOf(e) !== -1) { match = true; } }); return match; } else { expected = angular.lowercase('' + expected); return actual.indexOf(expected) !== -1; } }; return function (array, expression) { return $filter('filter')(array, expression, comparator); }; }); 

然后我们可以在任何我们想要的地方使用它:

 $scope.list=[ {name:'Jack Bauer'}, {name:'Chuck Norris'}, {name:'Superman'}, {name:'Batman'}, {name:'Spiderman'}, {name:'Hulk'} ]; <ul> <li ng-repeat="item in list | filterWithOr:{name:['Jack','Chuck']}"> {{item.name}} </li> </ul> 

最后,这是一个普朗克 。

注意:预期的数组应该只包含像StringNumber等简单的对象

你可以使用angular.filter的searchField过滤器

JS:

 $scope.users = [ { first_name: 'Sharon', last_name: 'Melendez' }, { first_name: 'Edmundo', last_name: 'Hepler' }, { first_name: 'Marsha', last_name: 'Letourneau' } ]; 

HTML:

 <input ng-model="search" placeholder="search by full name"/> <th ng-repeat="user in users | searchField: 'first_name': 'last_name' | filter: search"> {{ user.first_name }} {{ user.last_name }} </th> <!-- so now you can search by full name --> 

如果情况允许,你也可以使用ngIf

 <div ng-repeat="p in [ { name: 'Justin' }, { name: 'Jimi' }, { name: 'Bob' } ]" ng-if="['Jimi', 'Bob'].indexOf(e.name) > -1"> {{ p.name }} is cool </div> 

我相信这是你要找的东西:

 <div>{{ (collection | fitler1:args) + (collection | filter2:args) }}</div> 

我找到的最快捷的解决方案是使用angular-filter中的filterBy过滤器 ,例如:

 <input type="text" placeholder="Search by name or genre" ng-model="ctrl.search"/> <ul> <li ng-repeat="movie in ctrl.movies | filterBy: ['name', 'genre']: ctrl.search"> {{movie.name}} ({{movie.genre}}) - {{movie.rating}} </li> </ul> 

好处是角度过滤器是一个相当流行的库(在GitHub上约2.6k星),它仍然是积极开发和维护的,因此应该把它作为依赖添加到项目中。

让我们假设你有两个数组,一个用于电影,一个用于流派

只需使用过滤器: filter:{genres: genres.type}

这里的流派是数组和类型,对流派有价值

我写这个字符串和功能(我知道这不是问题,但我搜索它,并在这里),也许它可以扩大。

 String.prototype.contains = function(str) { return this.indexOf(str) != -1; }; String.prototype.containsAll = function(strArray) { for (var i = 0; i < strArray.length; i++) { if (!this.contains(strArray[i])) { return false; } } return true; } app.filter('filterMultiple', function() { return function(items, filterDict) { return items.filter(function(item) { for (filterKey in filterDict) { if (filterDict[filterKey] instanceof Array) { if (!item[filterKey].containsAll(filterDict[filterKey])) { return false; } } else { if (!item[filterKey].contains(filterDict[filterKey])) { return false; } } } return true; }); }; }); 

用法:

 <li ng-repeat="x in array | filterMultiple:{key1: value1, key2:[value21, value22]}">{{x.name}}</li> 

角度或过滤器模块

$filter('orFilter')([{..}, {..} ...], {arg1, arg2, ...}, false)

这里是链接: https : //github.com/webyonet/angular-or-filter

请试试这个

 var m = angular.module('yourModuleName'); m.filter('advancefilter', ['$filter', function($filter){ return function(data, text){ var textArr = text.split(' '); angular.forEach(textArr, function(test){ if(test){ data = $filter('filter')(data, test); } }); return data; } }]); 

我有类似的情况。 编写自定义过滤器为我工作。 希望这可以帮助!

JS:

 App.filter('searchMovies', function() { return function (items, letter) { var resulsts = []; var itemMatch = new RegExp(letter, 'i'); for (var i = 0; i < items.length; i++) { var item = items[i]; if ( itemMatch.test(item.name) || itemMatch.test(item.genre)) { results.push(item); } } return results; }; }); 

HTML:

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

这里是我的例子如何创建表jsfiddle过滤器和指令

指令获取列表(数据),并创建带有过滤器的表

 <div ng-app="autoDrops" ng-controller="HomeController"> <div class="row"> <div class="col-md-12"> <h1>{{title}}</h1> <ng-Multiselect array-List="datas"></ng-Multiselect> </div> </div> </div> 

我的荣幸,如果我帮你

加入派对的时间太晚,但可能会帮助某人:

我们可以分两步进行,先按第一个属性过滤,再用第二个过滤器连接:

 $scope.filterd = $filter('filter')($scope.empList, { dept: "account" }); $scope.filterd = $scope.filterd.concat($filter('filter')($scope.empList, { dept: "sales" })); 

看到多个属性过滤器工作小提琴

我的解决方案

 ng-repeat="movie in movies | filter: {'Action'} + filter: {'Comedy}" 

最好的答案是:

 filter:({genres: 'Action', genres: 'Comedy'} 
  • 如何从angular.js数组中删除元素/节点
  • Angular JS Scaling&Performance
  • 什么是ng-repeat指令的优先级可以改变它?
  • angularjs ng-style:background-image不起作用
  • 在嵌套的ng-repeat中传递2个$ index值
  • 如何使ng-repeat过滤掉重复的结果
  • 将parameter passing给Angular ng-include
  • ng-repeat定义的次数,而不是重复的数组?
  • Angular ng-repeat每3或4列添加bootstrap行
  • AngularJS按表头对行进行sorting
  • 如何突出显示ngRepeat中选定的行?