Использование запятой в качестве разделителя списка с AngularJS

Мне нужно создать список элементов через запятую:

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

Согласно документации AngularJS, операторы потока управления не допускаются в выражениях. Вот почему мой {{$last ? '' : ', '}}не работает.

Есть ли альтернативный способ создания списков через запятую?

EDIT 1
есть что-то проще, чем:

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

Вы могли бы сделать это так:

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

..Но мне нравится ответ Филиппа :-)

Просто используйте встроенную join(separator)функцию Javascript для массивов:

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

Также:

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

И в шаблоне:

{{ itemsArray | joinBy:',' }}

Вы можете использовать CSS, чтобы исправить это тоже

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

Но ответ Энди Джослина лучший

Изменить: я передумал, я должен был сделать это недавно, и я в конечном итоге пошел с фильтром соединения.

Я думаю, что лучше использовать ng-if. ng-showсоздает элемент в domи устанавливает его display:none. Чем больше domэлементов у вас есть, тем больше ресурсов требует ваше приложение, а на устройствах с меньшими ресурсами меньше domэлементов - тем лучше.

TBH <span ng-if="!$last">, </span>кажется отличным способом сделать это. Это просто.

Поскольку этот вопрос довольно старый и AngularJS успел развиться с тех пор, это теперь легко можно сделать с помощью:

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

Обратите внимание, что я использую ngBindвместо интерполяции, {{ }}поскольку он намного более производительный: ngBind будет работать только тогда, когда переданное значение действительно изменится. Скобки {{ }}, с другой стороны, будут проверяться и обновляться в каждом $ дайджесте, даже если в этом нет необходимости. Источник: здесь , здесь и здесь .

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>

В заключение отметим, что все решения здесь работают и действуют по сей день. Я действительно нашел тех, кто использует CSS, так как это больше вопрос презентации.

Мне нравится подход симбу, но мне неудобно использовать первого или последнего ребенка. Вместо этого я изменяю только содержимое повторяющегося списка через запятую.

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

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

Если вы используете ng-show для ограничения значений, это {{$last ? '' : ', '}}не сработает, поскольку все равно будут учитываться все значения. Пример

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

Результатом является добавление запятой после «последнего» значения , поскольку при использовании ng-show все равно учитываются все 4 значения

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

Одним из решений является добавление фильтра непосредственно в ng-repeat

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

Полученные результаты

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