Мне нужно создать список элементов через запятую:
<li ng-repeat="friend in friends">
<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>...
</li>
Согласно документации AngularJS, операторы потока управления не допускаются в выражениях. Вот почему мой {{$last ? '' : ', '}}
не работает.
Есть ли альтернативный способ создания списков через запятую?
EDIT 1
есть что-то проще, чем:
<span ng-show="!$last">, </span>
angularjs
angularjs-ng-repeat
Франк Фрайбургер
источник
источник
Ответы:
Вы могли бы сделать это так:
<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>
..Но мне нравится ответ Филиппа :-)
источник
($last && '' || ', ')
всегда уступать', '
?{{{true: '', false: ', '}[$last]}}
. Этот метод более гибкий, чем использование,.join
потому что он позволяет элементам в списке быть членами массива, например:<b ng-repeat="friend in friends">{{friend.email}}{{{true: '', false: ', '}[$last]}}</b>
Просто используйте встроенную
join(separator)
функцию Javascript для массивов:источник
join()
и отключить экранирование HTML, но для этого в аду есть специальное место;)Также:
И в шаблоне:
источник
{{ itemsArray.join(', ') }}
?источник
Вы можете использовать CSS, чтобы исправить это тоже
Но ответ Энди Джослина лучший
Изменить: я передумал, я должен был сделать это недавно, и я в конечном итоге пошел с фильтром соединения.
источник
Я думаю, что лучше использовать
ng-if
.ng-show
создает элемент вdom
и устанавливает егоdisplay:none
. Чем большеdom
элементов у вас есть, тем больше ресурсов требует ваше приложение, а на устройствах с меньшими ресурсами меньшеdom
элементов - тем лучше.TBH
<span ng-if="!$last">, </span>
кажется отличным способом сделать это. Это просто.источник
Поскольку этот вопрос довольно старый и AngularJS успел развиться с тех пор, это теперь легко можно сделать с помощью:
<li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>
,Обратите внимание, что я использую
ngBind
вместо интерполяции,{{ }}
поскольку он намного более производительный:ngBind
будет работать только тогда, когда переданное значение действительно изменится. Скобки{{ }}
, с другой стороны, будут проверяться и обновляться в каждом $ дайджесте, даже если в этом нет необходимости. Источник: здесь , здесь и здесь .В заключение отметим, что все решения здесь работают и действуют по сей день. Я действительно нашел тех, кто использует CSS, так как это больше вопрос презентации.
источник
Мне нравится подход симбу, но мне неудобно использовать первого или последнего ребенка. Вместо этого я изменяю только содержимое повторяющегося списка через запятую.
источник
Если вы используете ng-show для ограничения значений, это
{{$last ? '' : ', '}}
не сработает, поскольку все равно будут учитываться все значения. ПримерРезультатом является добавление запятой после «последнего» значения , поскольку при использовании ng-show все равно учитываются все 4 значения
Одним из решений является добавление фильтра непосредственно в ng-repeat
Полученные результаты
источник