Використання кома як роздільника списку за допомогою 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елементів.

ТББ <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, оскільки це більше питання презентації.

Мені подобається підхід simbu, але мені не зручно користуватися першою дитиною або останньою дитиною. Натомість я лише змінюю вміст повторюваного класу список-кома.

.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-повтор

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

Результати

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