Usando vírgula como separador de lista com AngularJS

Preciso criar uma lista de itens separados por vírgula:

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

De acordo com a documentação do AngularJS, nenhuma instrução de fluxo de controle é permitida em expressões. É por isso que o meu {{$last ? '' : ', '}}não funciona.

Existe uma maneira alternativa de criar listas separadas por vírgula?

EDIT 1
existe algo mais simples que:

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

Você poderia fazer assim:

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

..Mas eu gosto da resposta do Philipp :-)

Basta usar a função interna do Javascript join(separator)para matrizes:

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

Além disso:

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

E no modelo:

{{ itemsArray | joinBy:',' }}

Você pode usar CSS para corrigi-lo também

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

Mas a resposta de Andy Joslin é melhor

Edit: Eu mudei de idéia, tive que fazer isso recentemente e acabei indo com um filtro de junção.

Eu acho que é melhor usar ng-if. ng-showcria um elemento no dome define-o display:none. Quanto mais domelementos você tiver, mais recursos o seu aplicativo se tornará e, em dispositivos com menos recursos, menos domelementos, melhor.

TBH <span ng-if="!$last">, </span>parece ser uma ótima maneira de fazê-lo. É simples.

Como essa pergunta é bastante antiga e o AngularJS teve tempo de evoluir desde então, agora isso pode ser facilmente alcançado usando:

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

Observe que estou usando em ngBindvez de interpolação {{ }}, pois é muito mais eficiente: ngBind só será executado quando o valor passado realmente mudar. Os colchetes {{ }}, por outro lado, serão sujos verificados e atualizados a cada $ digest, mesmo que não seja necessário. Fonte: aqui , aqui e aqui .

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>

Em uma nota final, todas as soluções aqui funcionam e são válidas até hoje. Eu realmente sou encontrado por aqueles que envolvem CSS, pois esse é mais um problema de apresentação.

Gosto da abordagem da simbu, mas não me sinto confortável em usar o primeiro ou o último filho. Em vez disso, apenas modifico o conteúdo de uma classe de lista-vírgula repetida.

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

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

Se você estiver usando o ng-show para limitar os valores, o processo {{$last ? '' : ', '}}não funcionará, pois ainda levará em consideração todos os 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 na adição de uma vírgula após o "último" valor , pois com ng-show ele ainda leva em consideração todos os 4 valores

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

Uma solução é adicionar um filtro diretamente ao ng-repeat

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

Resultados

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