Utilisation de la virgule comme séparateur de liste avec AngularJS

J'ai besoin de créer une liste d'éléments séparés par des virgules:

  <li ng-repeat="friend in friends">
      <b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>...
  </li>

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

Existe-t-il un autre moyen de créer des listes séparées par des virgules?

EDIT 1
est-il quelque chose de plus simple que:

<span ng-show="!$last">, </span>

Vous pouvez le faire de cette façon:

<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>

..Mais j'aime la réponse de Philipp :-)

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

<li ng-repeat="friend in friends">
  <b>{{friend.email.join(', ')}}</b>...
</li>

Aussi:

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

Et dans le modèle:

{{ itemsArray | joinBy:',' }}

Vous pouvez également utiliser CSS pour le corriger

<div class="some-container">
[ <span ng-repeat="something in somethings">{{something}}<span class="list-comma">, </span></span> ]
</div>

.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 l'utiliser ng-if. ng-showcrée un élément dans le domet le définit display:none. Plus domvous avez d'éléments, plus votre application est gourmande en ressources, et sur les appareils avec moins de ressources, moins il y a d' doméléments, mieux c'est.

TBH <span ng-if="!$last">, </span>semble être un excellent moyen de le faire. C'est simple.

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

<li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>.

Notez que j'utilise à la ngBindplace de l'interpolation {{ }}car c'est beaucoup plus performant: ngBind ne fonctionnera que lorsque la valeur passée change réellement. Les parenthèses {{ }}, par contre, seront vérifiées et actualisées dans chaque $ 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>
  </ul>
</div>

Sur une note finale, toutes les solutions ici fonctionnent et sont valables à ce jour. Je suis vraiment tombé sur ceux qui impliquent CSS car il s'agit plus d'un problème de présentation.

J'aime l'approche de simbu, mais je ne suis pas à l'aise d'utiliser le premier ou le dernier enfant. Au lieu de cela, je ne modifie que le contenu d'une classe répétitive de liste-virgule.

.list-comma + .list-comma::before {
    content: ', ';
}

<span class="list-comma" ng-repeat="destination in destinations">
    {{destination.name}}
</span>

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

<div ng-repeat="x in records" ng-show="x.email == 1">{{x}}{{$last ? '' : ', '}}</div>

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

Résultat 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 à ajouter un filtre directement dans ng-repeat

<div ng-repeat="x in records | filter: { email : '1' } ">{{x}}{{$last ? '' : ', '}}</div>

Résultats

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