Utilizzo della virgola come separatore di elenco con AngularJS

Devo creare un elenco di elementi separati da virgole:

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

Secondo la documentazione di AngularJS, nelle espressioni non sono consentite istruzioni sul flusso di controllo. Questo è il motivo per cui il mio {{$last ? '' : ', '}}non funziona.

Esiste un modo alternativo per creare elenchi separati da virgola?

EDIT 1
c'è qualcosa di più semplice di:

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

Potresti farlo in questo modo:

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

..Ma mi piace la risposta di Philipp :-)

Basta usare la funzione integrata di Javascript join(separator)per gli array:

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

Anche:

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

E nel modello:

{{ itemsArray | joinBy:',' }}

Puoi anche usare CSS per risolverlo

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

Ma la risposta di Andy Joslin è la migliore

Modifica: ho cambiato idea, ho dovuto farlo di recente e ho finito con un filtro join.

Penso che sia meglio usare ng-if. ng-showcrea un elemento in dome lo imposta display:none. Più domelementi hai, più la tua app ha fame di risorse, e su dispositivi con risorse più basse, minore è il numero di domelementi, meglio è.

TBH <span ng-if="!$last">, </span>sembra un ottimo modo per farlo. È semplice.

Poiché questa domanda è piuttosto vecchia e AngularJS aveva avuto il tempo di evolversi da allora, questo ora può essere facilmente raggiunto usando:

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

Nota che sto usando l' ngBindinterpolazione invece {{ }}che è molto più performante: ngBind verrà eseguito solo quando il valore passato cambia effettivamente. Le parentesi {{ }}, d'altra parte, saranno sporche controllate e aggiornate in ogni $ digest, anche se non è necessario. Fonte: qui , qui e qui .

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>

In ultima analisi, tutte le soluzioni qui funzionano e sono valide fino ad oggi. Mi sono davvero trovato a quelli che coinvolgono CSS in quanto questo è più un problema di presentazione.

Mi piace l'approccio di simbu, ma non mi sento a mio agio con il primo figlio o l'ultimo figlio. Invece, modifico solo il contenuto di una classe di virgole elenco ripetuta.

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

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

Se stai usando ng-show per limitare i valori, {{$last ? '' : ', '}}non funzionerà poiché prenderà ancora in considerazione tutti i valori.

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

Si ottiene l' aggiunta di una virgola dopo il valore "last" , poiché con ng-show prende ancora in considerazione tutti e 4 i valori

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

Una soluzione è aggiungere un filtro direttamente in ng-repeat

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

risultati

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