Использование запятой в качестве разделителя списков с помощью AngularJS

Ответ 1

Вы можете сделать это следующим образом:

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

.. Но мне нравится Филипп ответить: -)

Ответ 2

Просто используйте встроенную функцию Javascript join(separator) для массивов:

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

Ответ 3

также:

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

И в шаблоне:

{{ itemsArray | joinBy:',' }}

Ответ 4

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

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

Ответ 5

Вы можете использовать CSS, чтобы исправить его тоже

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

Но лучший ответ Энди Йослина

Изменить: я передумал, мне пришлось сделать это недавно, и я закончил работу с фильтром соединения.

Ответ 6

Я думаю, что лучше использовать ng-if. ng-show создает элемент в dom и устанавливает его display:none. Чем больше элементов dom у вас есть больше ресурсов, голодных ваше приложение становится, и на устройствах с более низкими ресурсами меньше dom элементов лучше.

TBH <span ng-if="!$last">, </span> кажется отличным способом сделать это. Это просто.

Ответ 7

Поскольку этот вопрос довольно старый, и AngularJS успел развиваться с тех пор, теперь это можно легко достичь, используя:

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

Обратите внимание, что я использую ngBind вместо интерполяции {{ }}, поскольку он намного более эффективен: ngBind будет выполняться только тогда, когда переданное значение действительно изменится. С другой стороны, скобки {{ }} будут грязно проверены и обновлены в каждом $digest, даже если это не обязательно. Источник: здесь, здесь и здесь.

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>

Ответ 8

Если вы используете ng-show для ограничения значений, {{$last ? '' : ', '}} won`t работает, так как он все равно будет принимать во внимание все значения. Пример

<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 все еще учитываются все 4 значения

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

Одно из решений - добавить фильтр непосредственно в ng-repeat

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

Результаты

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