Menggunakan koma sebagai pemisah daftar dengan AngularJS

Saya perlu membuat daftar item yang dipisahkan koma:

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

Menurut dokumentasi AngularJS, tidak ada pernyataan aliran kontrol yang diizinkan dalam ekspresi. Inilah mengapa saya {{$last ? '' : ', '}}tidak bekerja.

Apakah ada cara alternatif untuk membuat daftar yang dipisahkan koma?

EDIT 1
ada sesuatu yang lebih sederhana daripada:

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

Anda bisa melakukannya dengan cara ini:

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

..Tapi saya suka jawaban Philipp :-)

Cukup gunakan join(separator)fungsi bawaan Javascript untuk array:

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

Juga:

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

Dan di templat:

{{ itemsArray | joinBy:',' }}

Anda dapat menggunakan CSS untuk memperbaikinya juga

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

Tapi jawaban Andy Joslin adalah yang terbaik

Sunting: Saya berubah pikiran, saya harus melakukan ini baru-baru ini dan akhirnya pergi dengan filter gabungan.

Saya pikir lebih baik digunakan ng-if. ng-showmenciptakan elemen dalam domdan menyetelnya display:none. Semakin banyak domelemen yang Anda habiskan, semakin banyak sumber daya yang dihabiskan aplikasi Anda, dan pada perangkat dengan sumber daya yang lebih rendah semakin sedikitdom elemen yang lebih baik.

TBH <span ng-if="!$last">, </span>sepertinya cara yang bagus untuk melakukannya. Itu mudah.

Karena pertanyaan ini sudah cukup lama dan AngularJS memiliki waktu untuk berkembang sejak saat itu, ini sekarang dapat dengan mudah dicapai dengan menggunakan:

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

Perhatikan bahwa saya menggunakan ngBindalih-alih interpolasi {{ }}karena jauh lebih berkinerja: ngBind hanya akan berjalan ketika nilai yang diteruskan benar-benar berubah. Kurung {{ }}, di sisi lain, akan kotor diperiksa dan disegarkan setiap $ digest, bahkan jika itu tidak perlu. Sumber: sini , sini dan sini .

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>

Pada catatan akhir, semua solusi di sini berfungsi dan valid hingga hari ini. Saya benar-benar menemukan mereka yang melibatkan CSS karena ini lebih merupakan masalah presentasi.

Saya suka pendekatan simbu, tetapi saya tidak nyaman menggunakan anak pertama atau anak terakhir. Alih-alih, saya hanya memodifikasi konten kelas koma daftar berulang.

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

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

Jika Anda menggunakan ng-show untuk membatasi nilai, {{$last ? '' : ', '}}tidak akan berhasil karena masih akan mempertimbangkan semua nilai. Contoh

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

Hasil dalam menambahkan koma setelah nilai "terakhir" , karena dengan ng-show itu masih mempertimbangkan semua 4 nilai

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

Salah satu solusinya adalah menambahkan filter langsung ke ng-repeat

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

Hasil

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