Verwenden von Komma als Listentrennzeichen bei AngularJS

Ich muss eine durch Kommas getrennte Liste von Elementen erstellen:

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

Gemäß der AngularJS-Dokumentation sind in Ausdrücken keine Kontrollflussanweisungen zulässig. Deshalb {{$last ? '' : ', '}}funktioniert mein nicht.

Gibt es eine alternative Möglichkeit, durch Kommas getrennte Listen zu erstellen?

EDIT 1
gibt es etwas einfacher als:

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

Sie könnten es so machen:

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

..Aber ich mag Philipps Antwort :-)

Verwenden Sie einfach das integrierte Javascript join(separator) Funktion für Arrays:

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

Ebenfalls:

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

Und in Vorlage:

{{ itemsArray | joinBy:',' }}

Sie können auch CSS verwenden, um das Problem zu beheben

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

Aber Andy Joslins Antwort ist am besten

Bearbeiten: Ich habe meine Meinung geändert, dass ich dies kürzlich tun musste, und am Ende habe ich einen Join-Filter verwendet.

Ich denke, es ist besser zu verwenden ng-if. ng-showerstellt ein Element in der domund setzt es display:none. Je mehr domElemente Sie haben, desto ressourcenhungriger wird Ihre App. Auf Geräten mit geringeren Ressourcen gilt: Je weniger Elemente, desto dombesser.

TBH <span ng-if="!$last">, </span>scheint eine großartige Möglichkeit zu sein. Es ist einfach.

Da diese Frage ziemlich alt ist und AngularJS seitdem Zeit hatte, sich weiterzuentwickeln, kann dies jetzt leicht erreicht werden mit:

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

Beachten Sie, dass ich ngBindanstelle der Interpolation verwende, {{ }}da diese viel leistungsfähiger ist: ngBind Wird nur ausgeführt, wenn sich der übergebene Wert tatsächlich ändert. Die Klammern {{ }}hingegen werden bei jedem $ Digest schmutzig überprüft und aktualisiert, auch wenn dies nicht erforderlich ist. Quelle: hier , hier und hier .

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>

Abschließend ist festzuhalten, dass alle hier aufgeführten Lösungen funktionieren und bis heute gültig sind. Ich bin wirklich zu denen gefunden, die CSS betreffen, da dies eher ein Präsentationsproblem ist.

Ich mag den Ansatz von simbu, aber es ist mir nicht angenehm, das erste oder letzte Kind zu verwenden. Stattdessen ändere ich nur den Inhalt einer sich wiederholenden Liste-Komma-Klasse.

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

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

Wenn Sie ng-show verwenden, um die Werte zu begrenzen, {{$last ? '' : ', '}}funktioniert dies nicht, da weiterhin alle Werte berücksichtigt werden. Beispiel

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

Das Hinzufügen eines Kommas nach dem "letzten" Wert führt dazu , dass bei ng-show immer noch alle 4 Werte berücksichtigt werden

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

Eine Lösung besteht darin, einen Filter direkt in ng-repeat hinzuzufügen

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

Ergebnisse

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