Estou executando um simples ng-repeat
sobre um arquivo JSON e quero obter nomes de categorias. Existem cerca de 100 objetos, cada um pertencendo a uma categoria - mas existem apenas cerca de 6 categorias.
Meu código atual é este:
<select ng-model="orderProp" >
<option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option>
</select>
A saída é de 100 opções diferentes, principalmente duplicatas. Como uso o Angular para verificar se um {{place.category}}
já existe e não criar uma opção se ele já estiver lá?
edit: no meu javascript $scope.places = JSON data
, apenas para esclarecer
db.collection.distinct("places")
, que era muito, muito melhor do que fazê-lo dentro do Angular! Infelizmente isso não vai funcionar para todos.Respostas:
Você pode usar o filtro exclusivo da AngularUI (código fonte disponível aqui: filtro exclusivo da AngularUI ) e usá-lo diretamente nas opções ng (ou ng-repeat).
fonte
angular.module('yourModule', ['ui', 'ui.filters']);
. Fiquei perplexo até eu dar uma olhada no arquivo js do AngularUI.unique
filtro pode actualmente ser encontrados como parte de AngularJS UI Utilsangular.module('ui.filters')
para o nome do aplicativo.Ou você pode escrever seu próprio filtro usando o lodash.
fonte
_.uniqBy(arr, field);
deve funcionar para propriedades aninhadasVocê pode usar o filtro 'unique' (aliases: uniq) no módulo angular.filter
use:
colection | uniq: 'property'
você também pode filtrar por propriedades aninhadas:
colection | uniq: 'property.nested_property'
O que você pode fazer, é algo assim ..
HTML: filtramos por ID do cliente, ou seja, removemos clientes duplicados
resultado
Lista de clientes:
foo 10
bar 20
baz 30
fonte
esse código funciona para mim.
e depois
fonte
Se você deseja listar categorias, acho que deve declarar explicitamente sua intenção na exibição.
no controlador:
fonte
group by
expressão naselect
diretiva.Aqui está um exemplo direto e genérico.
O filtro:
A marcação:
fonte
Cannot read property 'length' of undefined
na linhal = arr.length
Decidi estender a resposta de @ thethakuri para permitir profundidade ao membro único. Aqui está o código. Isso é para aqueles que não desejam incluir o módulo AngularUI inteiro apenas para esta funcionalidade. Se você já estiver usando o AngularUI, ignore esta resposta:
Exemplo
fonte
Eu tinha uma matriz de seqüências de caracteres, não objetos e usei esta abordagem:
com este filtro:
fonte
ATUALIZAR
Eu estava recomendando o uso de Set, mas desculpe isso não funcionar para ng-repeat, nem Map, já que ng-repeat funciona apenas com array. Portanto, ignore esta resposta. de qualquer forma, se você precisar filtrar duplicatas de uma maneira, como já foi dito
angular filters
, aqui está o link para a seção de introdução .Resposta antiga
Você pode usar a estrutura de dados de conjunto padrão do ECMAScript 2015 (ES6) , em vez de uma estrutura de dados de matriz dessa maneira, você filtra valores repetidos ao adicionar ao conjunto. (Lembre-se de que conjuntos não permitem valores repetidos). Muito fácil de usar:
fonte
Aqui está uma maneira apenas de modelo de fazê-lo (embora não esteja mantendo o pedido). Além disso, o resultado também será solicitado, o que é útil na maioria dos casos:
fonte
Nenhum dos filtros acima corrigiu meu problema, então tive que copiar o filtro do documento oficial do github. E então use-o como explicado nas respostas acima
função de retorno (itens, filterOn) {
fonte
Parece que todo mundo está jogando sua própria versão do
unique
filtro no anel, então eu farei o mesmo. A crítica é muito bem-vinda.fonte
Se você deseja obter dados exclusivos com base na chave aninhada:
Chame assim:
fonte
Adicione este filtro:
Atualize sua marcação:
fonte
Isso pode ser um exagero, mas funciona para mim.
A função distinta depende da função contém definida acima. Pode ser chamado como
array.distinct(prop);
onde prop é a propriedade que você deseja que seja distinta.Então você poderia dizer
$scope.places.distinct("category");
fonte
Crie sua própria matriz.
fonte