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

Question

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

мне нужно создать разделенный запятыми список элементов:

  <li ng-repeat="friend in friends">

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

  </li>

согласно документации AngularJS, никакие операторы потока управления не допускаются в выражениях. Вот почему мой {{$last ? '' : ', '}} не работает.

есть ли альтернативный способ создания списков, разделенных запятыми?

редактировать 1

есть ли что-то проще, чем:

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

558 8

angularjs angularjs-ng-repeat

8 ответов:

Comments

Ничего не найдено.

Andrew Joslin · Accepted Answer · 2013-10-17 18:05:14

вы могли бы сделать это таким образом:

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

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

Philipp Reichart · Accepted Answer · 2012-07-18 14:49:04

просто используйте встроенный Javascript join(separator) функции для массивов:
<li ng-repeat="friend in friends">
  <b>{{friend.email.join(', ')}}</b>...
</li>

sanusart · Accepted Answer · 2013-09-12 23:41:34

также:

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

и в шаблоне:

{{ itemsArray | joinBy:',' }}

simbu · Accepted Answer · 2015-08-04 12:35:34

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

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

Chris Stephens · Accepted Answer · 2014-08-11 20:28:28

вы можете использовать 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;
}
но ответ Энди Джослина лучше

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

the7erm · Accepted Answer · 2015-10-29 08:58:06

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

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

Cosmin Ababei · Accepted Answer · 2017-05-23 15:18:25

так как этот вопрос довольно старый и 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>
на заключительной ноте, все решения здесь работают и действительны по сей день. Я действительно нашел те, которые включают CSS, поскольку это больше проблема презентации.

Mihai · Accepted Answer · 2016-07-23 16:46:48

если вы используете ng-show для ограничения значений, то {{$last ? '' : ', '}} не будет работать, поскольку он по-прежнему будет принимать во внимание все значения.Пример
<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"},
одним из решений является добавление фильтра прямо в НГ-повтор
<div ng-repeat="x in records | filter: { email : '1' } ">{{x}}{{$last ? '' : ', '}}</div>
результаты
{"email":"1"},
{"email":"1"}