Sử dụng dấu phẩy làm dấu tách danh sách với AngularJS

Tôi cần tạo một danh sách các mục được phân tách bằng dấu phẩy:

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

Theo tài liệu AngularJS, không cho phép các câu lệnh điều khiển trong biểu thức. Đây là lý do tại sao của tôi {{$last ? '' : ', '}}không làm việc.

Có cách nào khác để tạo danh sách được phân tách bằng dấu phẩy không?

EDIT 1
có gì đó đơn giản hơn:

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

Bạn có thể làm theo cách này:

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

..Nhưng tôi thích câu trả lời của Philipp :-)

Chỉ cần sử dụng join(separator)chức năng tích hợp của Javascript cho các mảng:

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

Cũng thế:

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

Và trong mẫu:

{{ itemsArray | joinBy:',' }}

Bạn cũng có thể sử dụng CSS để sửa nó

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

Nhưng câu trả lời của Andy Joslin là tốt nhất

Chỉnh sửa: Tôi đã thay đổi suy nghĩ của mình Tôi phải làm điều này gần đây và cuối cùng tôi đã đi với một bộ lọc tham gia.

Tôi nghĩ rằng nó tốt hơn để sử dụng ng-if. ng-showtạo một phần tử trong domvà thiết lập nó display:none. Càng nhiều domyếu tố bạn càng có nhiều tài nguyên thì ứng dụng của bạn càng trở nên đói và trên các thiết bị có tài nguyên càng thấp thì càng ít domyếu tố càng tốt.

TBH <span ng-if="!$last">, </span>có vẻ như là một cách tuyệt vời để làm điều đó. Thật đơn giản.

Vì câu hỏi này khá cũ và AngularJS đã có thời gian để phát triển kể từ đó, giờ đây có thể dễ dàng đạt được bằng cách sử dụng:

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

Lưu ý rằng tôi đang sử dụng ngBindthay vì nội suy {{ }}vì nó hiệu quả hơn nhiều: ngBind sẽ chỉ chạy khi giá trị được truyền thực sự thay đổi. Mặt khác {{ }}, dấu ngoặc sẽ bị kiểm tra và làm mới bẩn trong mỗi $ digest, ngay cả khi không cần thiết. Nguồn: đây , đây và đây .

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>

Trên một lưu ý cuối cùng, tất cả các giải pháp ở đây hoạt động và có giá trị cho đến ngày nay. Tôi thực sự tìm thấy những người liên quan đến CSS vì đây là vấn đề trình bày nhiều hơn.

Tôi thích cách tiếp cận của simbu, nhưng tôi không thoải mái khi sử dụng con đầu hoặc con cuối. Thay vào đó tôi chỉ sửa đổi nội dung của một lớp danh sách lặp lại.

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

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

Nếu bạn đang sử dụng ng-show để giới hạn các giá trị, thì {{$last ? '' : ', '}}sẽ không hoạt động vì nó vẫn sẽ xem xét tất cả các giá trị. Ví dụ

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

Kết quả trong việc thêm dấu phẩy sau giá trị "cuối cùng" , vì với ng-show, nó vẫn xem xét cả 4 giá trị

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

Một giải pháp là thêm bộ lọc trực tiếp vào ng-repeat

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

Các kết quả

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