Usando una coma como separador de lista con AngularJS

Necesito crear una lista de elementos separados por comas:

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

De acuerdo con la documentación de AngularJS, no se permiten declaraciones de flujo de control en las expresiones. Por eso mi{{$last ? '' : ', '}} no funciona.

¿Hay alguna forma alternativa de crear listas separadas por comas?

EDITAR 1
¿hay algo más simple que:

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

Podrías hacerlo de esta manera:

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

..Pero me gusta la respuesta de Philipp :-)

Simplemente use la función incorporada de Javascript join(separator)para las matrices:

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

También:

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

Y en plantilla:

{{ itemsArray | joinBy:',' }}

Puedes usar CSS para arreglarlo también

<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;
}

Pero la respuesta de Andy Joslin es la mejor

Editar: cambié de opinión, tenía que hacer esto recientemente y terminé con un filtro de combinación.

Creo que es mejor usarlo ng-if. ng-showcrea un elemento en domy lo establece display:none. Cuantos más domelementos tenga, más recursos necesitará su aplicación, y en dispositivos con menos recursos, menosdom elementos, mejor.

TBH <span ng-if="!$last">, </span>parece ser una excelente manera de hacerlo. Es sencillo.

Como esta pregunta es bastante antigua y AngularJS ha tenido tiempo de evolucionar desde entonces, ahora se puede lograr fácilmente usando:

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

Tenga en cuenta que estoy usando en ngBindlugar de la interpolación, {{ }}ya que es mucho más eficiente: ngBind solo se ejecutará cuando el valor pasado realmente cambie. Los corchetes {{ }}, por otro lado, serán revisados ​​y actualizados en cada $ digest, incluso si no es necesario. Fuente: aquí , aquí y aquí .

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>

En una nota final, todas las soluciones aquí funcionan y son válidas hasta el día de hoy. Realmente me encuentro con aquellos que involucran CSS ya que esto es más un problema de presentación.

Me gusta el enfoque de simbu, pero no me siento cómodo con el primer hijo o el último hijo. En cambio, solo modifico el contenido de una clase repetida de lista-coma.

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

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

Si está utilizando ng-show para limitar los valores, {{$last ? '' : ', '}}no funcionará, ya que aún tendrá en cuenta todos los valores.

<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"}
  ]
});

Resulta en agregar una coma después del "último" valor , ya que con ng-show todavía tiene en cuenta los 4 valores

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

Una solución es agregar un filtro directamente en ng-repeat

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

Resultados

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