AngularJS ile liste ayırıcı olarak virgül kullanma

Virgülle ayrılmış bir öğe listesi oluşturmak gerekir:

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

AngularJS belgelerine göre, ifadelerde hiçbir kontrol akış ifadesine izin verilmez. Bu yüzden benim {{$last ? '' : ', '}}çalışmıyor.

Virgülle ayrılmış listeler oluşturmanın alternatif bir yolu var mı?

DÜZENLEME 1'den
daha basit bir şey var:

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

Bunu şu şekilde yapabilirsiniz:

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

..Ama Philipp'in cevabını seviyorum :-)

join(separator)Diziler için Javascript'in yerleşik işlevini kullanmanız yeterlidir:

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

Ayrıca:

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

Ve şablonda:

{{ itemsArray | joinBy:',' }}

Düzeltmek için CSS'yi de kullanabilirsiniz

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

Ama Andy Joslin'in cevabı en iyisi

Edit: Son zamanlarda bunu yapmak zorunda fikrimi değiştirdim ve bir katılma filtresi ile gidiş sona erdi.

Bence kullanmak daha iyi ng-if. ng-showiçinde bir öğe oluşturur domve bunu ayarlar display:none. Ne kadar çok domöğeye sahip olursanız uygulamanıza o kadar çok aç kalırsınız ve daha az kaynağa sahip cihazlardadom öğe o kadar iyi olur.

TBH <span ng-if="!$last">, </span>bunu yapmanın harika bir yolu gibi görünüyor. Basit.

Bu soru oldukça eski olduğundan ve AngularJS'nin o zamandan bu yana gelişmeye zamanı olduğu için, bu artık şu şekilde kolayca gerçekleştirilebilir:

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

Çok daha fazla performans olduğu için ngBindenterpolasyon yerine kullanıyorum {{ }}: ngBind sadece iletilen değer gerçekten değiştiğinde çalışır. {{ }}Diğer yandan, köşeli parantezler , gerekli olmasa bile, her sindirimde kirli kontrol edilecek ve yenilenecektir. Kaynak: burada , burada ve burada .

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>

Son olarak, buradaki tüm çözümler işe yarar ve bugüne kadar geçerlidir. Bu gerçekten bir sunum meselesi olduğu için CSS içerenleri gerçekten buldum.

Ben simbu'nun yaklaşımını seviyorum, ama ilk çocuğu veya son çocuğu kullanmak rahat değil. Bunun yerine yalnızca yinelenen bir liste-virgül sınıfının içeriğini değiştiriyorum.

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

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

Değerleri sınırlamak için ng-show kullanıyorsanız {{$last ? '' : ', '}}, yine de tüm değerleri dikkate alacağı için çalışmaz.

<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 ile hala 4 değerin tümünü dikkate aldığından , "son" değerden sonra virgül eklemenin sonuçları

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

Bir çözüm, doğrudan ng-repeat'e bir filtre eklemektir.

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

Sonuçlar

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