Utiliser une virgule comme séparateur de liste avec AngularJS

Je dois créer une liste d’éléments séparés par des virgules:

  • {{email}}{{$last ? '' : ', '}}...
  • Selon la documentation AngularJS, aucune instruction de stream de contrôle n’est autorisée dans les expressions. C’est pourquoi mon {{$last ? '' : ', '}} {{$last ? '' : ', '}} ne fonctionne pas

    Existe-t-il une autre manière de créer des listes séparées par des virgules?

    EDIT 1
    Y a-t-il quelque chose de plus simple que:

     ,  

    Vous pouvez le faire de cette façon:

    {{email}}{{$last ? '' : ', '}}

    ..Mais j’aime la réponse de Philipp 🙂

    Utilisez simplement la fonction de join(separator) intégrée de Javascript pour les tableaux:

     
  • {{friend.email.join(', ')}}...
  • Aussi:

     angular.module('App.filters', []) .filter('joinBy', function () { return function (input,delimiter) { return (input || []).join(delimiter || ','); }; }); 

    Et dans le modèle:

     {{ itemsArray | joinBy:',' }} 
     .list-comma::before { content: ','; } .list-comma:first-child::before { content: ''; } 
      {{destination.name}}  

    Vous pouvez utiliser CSS pour le réparer aussi

     
    [ {{something}}, ]
    .some-container span:last-child .list-comma{ display: none; }

    Mais la réponse d’Andy Joslin est la meilleure

    Edit: J’ai changé d’avis. Je devais le faire récemment et j’ai fini par utiliser un filtre de jointure.

    Je pense qu’il vaut mieux utiliser ng-if . ng-show crée un élément dans le dom et définit son display:none . Plus vous avez d’éléments de dom , plus votre app devient gourmande en ressources, et plus les éléments avec moins de ressources sont nombreux, mieux c’est.

    TBH , semble être un excellent moyen de le faire. C’est simple.

    Étant donné que cette question est assez ancienne et qu’AngularJS a eu le temps d’évoluer depuis, cela peut maintenant être facilement réalisé en utilisant:

  • .

    Notez que j’utilise ngBind au lieu de l’interpolation {{ }} car c’est beaucoup plus performant: ngBind ne s’exécutera que lorsque la valeur passée changera réellement. Les parenthèses {{ }} , par contre, seront vérifiées et rafraîchies dans tous les $ digest, même si ce n’est pas nécessaire. Source: ici , ici et ici .

     angular .module('myApp', []) .controller('MyCtrl', ['$scope', function($scope) { $scope.records = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; } ]); 
     li { display: inline-block; } 
      

    Si vous utilisez ng-show pour limiter les valeurs, le {{$last ? '' : ', '}} {{$last ? '' : ', '}} ne fonctionnera pas car il faudra toujours prendre en compte toutes les valeurs.Exemple

     
    {{x}}{{$last ? '' : ', '}}
    var myApp = angular.module("myApp", []); myApp.controller("myCtrl", function($scope) { $scope.records = [ {"email": "1"}, {"email": "1"}, {"email": "2"}, {"email": "3"} ] });

    Résultats en ajoutant une virgule après la “dernière” valeur , car avec ng-show, il prend toujours en compte les 4 valeurs

     {"email":"1"}, {"email":"1"}, 

    Une solution consiste à append un filtre directement dans ng-repeat

     
    {{x}}{{$last ? '' : ', '}}

    Résultats

     {"email":"1"}, {"email":"1"}