Eu quero usar o filter
in angular e quero filtrar por vários valores, se ele tiver um dos valores, ele deverá ser exibido.
Eu tenho por exemplo esta estrutura:
Um objeto movie
que possui a propriedade genres
e desejo filtrar por Action
e Comedy
.
Sei que posso fazer filter:({genres: 'Action'} || {genres: 'Comedy'})
, mas o que fazer se quiser filtrá-lo dinamicamente. Por exemplofilter: variableX
Como faço para configurar variableX
no $scope
, quando eu tenho uma variedade de gêneros que tenho de filtro?
Eu poderia construí-lo como uma string e, em seguida, fazer um, eval()
mas não quero usar eval () ...
javascript
angularjs
angularjs-ng-repeat
JustGoscha
fonte
fonte
filter:({genres: 'Action'} || {genres: 'Comedy'})
funciona? não entraangular 1.3.16
.Respostas:
Gostaria apenas de criar um filtro personalizado. Eles não são tão difíceis.
modelo:
Edite aqui o link: Criando filtros angulares
ATUALIZAÇÃO : Aqui está um violino que tem uma demonstração exata da minha sugestão.
fonte
Você pode usar uma função de controlador para filtrar.
HTML:
fonte
$scope.filteredMovies = $filter('filter')($scope.movies, $scope.filterByGenres);
Criar um filtro personalizado pode ser um exagero aqui, basta passar um comparador personalizado, se você tiver os valores múltiplos como:
depois no filtro:
fonte
ng-model
arquivo de visualização para vincular ao filtro descrito? (desculpe, ainda está aprendendo aqui) - Eu gosto da simplicidade da sua resposta e tentar obtê-lo funcionar, mas não tenho certeza como rotular meus<input>
'sng-model
. :)Aqui está a implementação do filtro personalizado, que filtrará os dados usando a matriz de valores. Ele oferecerá suporte a vários objetos-chave com matriz e valor único de chaves. Conforme mencionado na API inangularJS, o filtro AngularJS Doc suporta vários filtros de chave com valor único, mas o filtro personalizado abaixo suporta o mesmo recurso que angularJS e também oferece matriz de valores e combinações de matriz e valor único de chaves.
Uso:
Aqui está um exemplo simples com a implementação do filtro personalizado "filterMutiple" acima . ::: Exemplo de violino :::
fonte
length property undefined
erro no console.if (fData.length > 0){ this.filteredData = fData; }
apenas:this.filteredData = fData;
Se você deseja filtrar a Matriz de objetos, pode dar
filter:({genres: 'Action', key :value }.
A propriedade individual será filtrada por um filtro específico fornecido para essa propriedade.
Mas se você quiser algo como filtrar por Propriedade individual e filtrar globalmente para todas as propriedades, poderá fazer algo assim.
~ Atul
fonte
Passei algum tempo nisso e, graças a @chrismarx, vi que o padrão do angular
filterFilter
permite que você passe seu próprio comparador. Aqui está o comparador editado para vários valores:E se quisermos criar um filtro personalizado para DRY:
E então podemos usá-lo onde quisermos:
Finalmente, aqui está um plunkr .
Nota: A matriz esperada deve conter apenas objetos simples como String , Number etc.
fonte
você pode usar o filtro searchField do angular.filter
JS:
HTML:
fonte
search
paradas aqui.Você também pode usar
ngIf
se a situação permitir:fonte
A solução mais rápida que encontrei é usar o
filterBy
filtro do filtro angular , por exemplo:O lado positivo é que o filtro angular é uma biblioteca bastante popular (~ 2.6k estrelas no GitHub) que ainda é ativamente desenvolvida e mantida; portanto, convém adicioná-lo ao seu projeto como uma dependência.
fonte
Acredito que é isso que você está procurando:
fonte
Por favor tente isto
fonte
Vamos supor que você tenha duas matrizes, uma para filme e outra para gênero
Basta usar o filtro como:
filter:{genres: genres.type}
Aqui os gêneros, sendo o array e o tipo, têm valor para o gênero
fonte
Eu escrevi isso para cadeias E funcionalidade (sei que não é a pergunta, mas procurei e cheguei aqui), talvez possa ser expandido.
Uso:
fonte
Módulo angular ou de filtro
$filter('orFilter')([{..}, {..} ...], {arg1, arg2, ...}, false)
aqui está o link: https://github.com/webyonet/angular-or-filter
fonte
Eu tive situação semelhante. Escrever filtro personalizado funcionou para mim. Espero que isto ajude!
JS:
HTML:
fonte
Aqui está meu exemplo de como criar filtro e diretiva para a tabela jsfiddle
diretiva obter lista (dados) e criar tabela com filtros
meu prazer se eu te ajudar
fonte
Tarde demais para participar da festa, mas pode ser que ajude alguém:
Podemos fazer isso em duas etapas, primeiro filtrar pela primeira propriedade e concatenar pelo segundo filtro:
Veja o violino de trabalho com filtro de várias propriedades
fonte
OPÇÃO 1: Usando o parâmetro comparador de filtro fornecido angular
OPÇÃO 2: Usando negação de filtro fornecida angular
fonte
Minha solução
fonte
a melhor resposta é:
fonte