Angular.js ng-repeat filter por propriedade com um de vários valores (OR de valores)

É possível filtrar uma matriz de objects, de modo que o valor da propriedade possa ser de alguns valores (condição OR) sem gravar um filtro personalizado

Isso é semelhante a este problema – Angular.js ng-repeat: filtrar por campo único

Mas em vez de

é possível fazer algo parecido com isto

 

para uma amostra de dados como segue-

 $scope.products = [ { id: 1, name: 'test', color: 'red' }, { id: 2, name: 'bob', color: 'blue' } /*... etc... */ ]; 

Eu tentei sem sucesso

 

A melhor maneira de fazer isso é usar uma function:

 
$scope.myFilter = function (item) { return item === 'red' || item === 'blue'; };

Como alternativa, você pode usar ngHide ou ngShow para mostrar e ocultar dinamicamente elementos com base em um determinado critério.

Para mim, funcionou como dado abaixo ..

 

Eu coisa “ng-if” deve funcionar:

 

Em HTML:

Em Angular:

 $scope.colorFilter = function (item) { if (item.color === 'red' || item.color === 'blue') { return item; } }; 

Aqui está uma maneira de fazê-lo ao passar um argumento extra:

https://stackoverflow.com/a/17813797/4533488 (graças a Denis Pshenov)

 
  • {{friend.name}}
  • Com o backend:

     $scope.weDontLike = function(name) { return function(friend) { return friend.name != name; } } 

    .


    E ainda outra maneira com um filtro in-template apenas:

    https://stackoverflow.com/a/12528093/4533488 (graças ao mikel)

     
    • {{friend.name}} {{friend.phone}}

    Eu encontrei uma solução mais genérica com a solução nativa mais angular que posso imaginar. Basicamente, você pode passar seu próprio comparador para a function filterFilter padrão. Aqui está tudo bem também.

    Depois de não conseguir encontrar uma boa solução universal, fiz algo de minha autoria. Eu não testei para uma lista muito grande.

    Ele cuida de chaves aninhadas, matrizes ou praticamente qualquer coisa.

    Aqui está o github e demo

     app.filter('xf', function() { function keyfind(f, obj) { if (obj === undefined) return -1; else { var sf = f.split("."); if (sf.length <= 1) { return obj[sf[0]]; } else { var newobj = obj[sf[0]]; sf.splice(0, 1); return keyfind(sf.join("."), newobj) } } } return function(input, clause, fields) { var out = []; if (clause && clause.query && clause.query.length > 0) { clause.query = String(clause.query).toLowerCase(); angular.forEach(input, function(cp) { for (var i = 0; i < fields.length; i++) { var haystack = String(keyfind(fields[i], cp)).toLowerCase(); if (haystack.indexOf(clause.query) > -1) { out.push(cp); break; } } }) } else { angular.forEach(input, function(cp) { out.push(cp); }) } return out; } }) 

    HTML

      
    ...