131 votes

Comment faire en sorte que ng-repeat filtre les résultats en doublon

Je fais tourner un simple ng-repeat sur un fichier JSON et je veux obtenir les noms des catégories. Il y a environ 100 objets, chacun appartenant à une catégorie - mais il n'y a qu'environ 6 catégories.

Mon code actuel est le suivant :

  {{place.category}}

La sortie est de 100 options différentes, principalement des doublons. Comment puis-je utiliser Angular pour vérifier si {{place.category}} existe déjà et ne pas créer une option s'il est déjà là ?

edit: Dans mon JavaScript, $scope.places = données JSON, juste pour clarifier

142voto

jpmorin Points 2345

Vous pourriez utiliser le filtre unique d'AngularUI (code source disponible ici : Filtre unique d'AngularUI) et l'utiliser directement dans les ng-options (ou ng-repeat).

    Par défaut
    // options uniques des catégories

38voto

Mike Ward Points 2743

Ou vous pouvez écrire votre propre filtre en utilisant lodash.

app.filter('unique', function() {
    return function (arr, field) {
        return _.uniq(arr, function(a) { return a[field]; });
    };
});

30voto

Ariel M. Points 141

Vous pouvez utiliser le filtre 'unique' (alias : uniq) dans le module angular.filter

utilisation : collection | uniq: 'propriété'
vous pouvez également filtrer par propriétés imbriquées : collection | uniq: 'propriété.propriété_embriquée'

Ce que vous pouvez faire, c'est quelque chose comme ça...

function MainController ($scope) {
 $scope.orders = [
  { id:1, customer: { name: 'foo', id: 10 } },
  { id:2, customer: { name: 'bar', id: 20 } },
  { id:3, customer: { name: 'foo', id: 10 } },
  { id:4, customer: { name: 'bar', id: 20 } },
  { id:5, customer: { name: 'baz', id: 30 } },
 ];
}

HTML : Nous filtrons par l'identifiant du client, c'est-à-dire que nous enlevons les clients dupliqués

Liste des clients : 

    {{ order.customer.name }} , {{ order.customer.id }} 

résultat
Liste des clients :
foo 10
bar 20
baz 30

16voto

Eduardo Ortiz Points 377

Ce code fonctionne pour moi.

app.filter('unique', function() {

  return function (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i

`et ensuite

var colors=$filter('unique')(items,"color");`

6voto

Tosh Points 13477

Si vous voulez répertorier les catégories, je pense que vous devriez explicitement indiquer votre intention dans la vue.

    {{category}}

dans le contrôleur :

$scope.categories = $scope.places.reduce(function(sum, place) {
  if (sum.indexOf( place.category ) < 0) sum.push( place.category );
  return sum;
}, []);

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X