Używanie przecinka jako separatora listy w AngularJS

Muszę utworzyć listę elementów oddzieloną przecinkami:

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

Zgodnie z dokumentacją AngularJS w wyrażeniach nie są dozwolone żadne instrukcje przepływu sterowania. Dlatego mój {{$last ? '' : ', '}}nie działa.

Czy istnieje alternatywny sposób tworzenia list oddzielonych przecinkami?

EDYCJA 1
jest coś prostszego niż:

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

Możesz to zrobić w ten sposób:

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

..Ale podoba mi się odpowiedź Filipa :-)

Wystarczy użyć wbudowanej join(separator)funkcji JavaScript dla tablic:

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

Również:

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

I w szablonie:

{{ itemsArray | joinBy:',' }}

Możesz także użyć CSS, aby to naprawić

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

Ale odpowiedź Andy'ego Joslina jest najlepsza

Edycja: Zmieniłem zdanie, musiałem to zrobić niedawno i ostatecznie zdecydowałem się na filtr sprzężenia.

Myślę, że lepiej jest używać ng-if. ng-showtworzy element w domi ustawia go display:none. Im więcej domelementów, tym więcej zasobów staje się głodnych, a na urządzeniach z niższymi zasobami, im mniej domelementów, tym lepiej.

TBH <span ng-if="!$last">, </span>wydaje się świetnym sposobem na zrobienie tego. To proste.

Ponieważ to pytanie jest dość stare i od tego czasu AngularJS miał czas na ewolucję, można to teraz łatwo osiągnąć za pomocą:

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

Zauważ, że używam ngBindzamiast interpolacji, {{ }}ponieważ jest znacznie wydajniejszy: ngBind będzie działał tylko wtedy, gdy przekazana wartość faktycznie się zmieni. Z kolei nawiasy klamrowe {{ }}będą sprawdzane i odświeżane przy każdym $ streszczeniu, nawet jeśli nie jest to konieczne. Źródło: tutaj , tutaj i tutaj .

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>

Podsumowując, wszystkie rozwiązania tutaj działają i obowiązują do dziś. Naprawdę jestem przekonany do tych, które dotyczą CSS, ponieważ jest to bardziej problem z prezentacją.

Lubię podejście Simbu, ale nie jest mi wygodnie korzystać z pierwszego dziecka lub ostatniego dziecka. Zamiast tego modyfikuję tylko zawartość powtarzającej się klasy przecinek list.

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

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

Jeśli używasz ng-show do ograniczenia wartości, {{$last ? '' : ', '}}nie zadziała, ponieważ nadal będzie uwzględniał wszystkie wartości.

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

Powoduje dodanie przecinka po wartości „ostatniej” , ponieważ w przypadku ng-show nadal uwzględnia wszystkie 4 wartości

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

Jednym z rozwiązań jest dodanie filtra bezpośrednio do powtórzenia ng

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

Wyniki

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