Ответ 1

У меня такая же проблема только с тегами... Вот мое решение:

<span ng-repeat-start="label in labels" ng-bind="label"></span> <span ng-repeat-end></span>

В принципе все повторяется между ng-repeat-start и ng-repeat-end, включая пробелы... К сожалению, это означало использование дополнительного тега span. Не идеально...

Ответ 2

Я решил проблему с помощью css. Просто измените диапазон на display:inline-block, и он будет обертываться должным образом.

Однако в моей конкретной ситуации это не сработало. Мне понадобилось пространство, чтобы элементы корректно работали, когда к ним применялся text-align:justify (равномерно распределяя их по родительскому элементу). Поэтому я сделал директиву:

angular.module('whatever')
.directive('addASpaceBetween', [function () {
        'use strict';
        return function (scope, element) {
            if(!scope.$last){
                element.after(' ');
            }
        }
    }
]);

а затем в html:

<span data-ng-repeat="(id, thing) in things" data-add-a-space-between>stuff</span>

Ответ 3

Мое решение (обратите внимание на пробельный символ после внутреннего интервала):

<span ng-repeat="gate in gates"><span class="label label-info">{{gate}}</span> </span>

Ответ 4

Вот несколько разных подходов:

HTML

Вы можете использовать встроенную оболочку браузера, которая обертывается, когда встречается пустое пространство. Чтобы принудительно выполнить его, вручную вставьте пробел после значения (см. Скрипту):

<span ng-repeat="label in labels">{{label}} </span>

CSS

Альтернативой является использование некоторых трюков CSS:

• Вставка пробела через CSS после каждого интервала:

  span:after{content:" "}
  

• Плавание пробелов

  а. Если div styling/border НЕ важно:

  span { float:left; }
  

  б. Если div styling/border IS важно, также измените отображение div:

  div { display:inline-block; }
  span { float:left; }
  

  Примечание: обертка не произойдет, если на div не существует ограничение ширины

Ответ 5

@Pavel помог мне, в частности, используя ng-repeat для <span> для ярлыков начальной загрузки. Они должны иметь конечное пустое пространство, иначе между ними не будет места. Удвоение значения span, поэтому класс label label-default не находится на том же span, что и тэг ng-repeat.

<span ng-repeat="value in values">
  <span class="label label-default">{{value}}</span>
</span>

http://jsfiddle.net/gLmtyfj4/2/

Ответ 6

Если vol7ron-ответ не работает, вы можете отображать строки в строке и добавлять к ним поля.

Здесь скрипка - JSFiddle

span {display:inline-block; margin-right:2px;}

Ответ 7

Вы можете использовать ng-class и добавить класс для всех, кроме последнего элемента.

<span ng-repeat="label in labels"
      ng-class="{space:!$last,last:$last}">{{label}}</span>

и

span.space:after {
    // content: ', '; // I like comma separated
    content: ' ';
}

Вот скрипка. http://jsfiddle.net/dnozay/d3v6vq7w/

Ответ 8

<span ng-repeat="label in labels">{{label}}<br/></span> 

или

<div ng-repeat="label in labels">{{label}}</div> 

Ответ 9

Это больше проблема стиля, а не логическая.
Возможно, вам может помочь следующее:

<div><span ng-repeat="label in labels">{{label}}</span></div>

Если вам нужен дополнительный стиль, чтобы он вписывался в ваше приложение, попробуйте уточнить свой вопрос, но я надеюсь, что вы поняли.

Ответ 10

Ответ Vol7ron допустим, иначе вы можете добавить пробел в конец элементов данных. Действительно ли это имеет реальный случай использования в мире?

http://jsfiddle.net/6e8Bn/6/

Вы можете видеть, что я сделал пару проходов вне любого контекста angular, и такое же поведение проявляется. По-видимому, поскольку браузер отображает одно слово в строке и не выполняет перенос слов через строки, если нет места, он просто продолжает движение вправо.

<span>I'm</span><span>not</span><span>even</span><span>angular</span><span>and</span><span>I</span><span>don't</span><span>wrap</span>

Пространства Javascript добавляются к данным:

$scope.labels=["alongwooooooooord ", "alongwooooooooord2 ", "alongwooooooooord3 ", "ealongwooooooooord5 ", "falongwooooooooord5 "];

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

Ответ 11

То, что вы ищете, это тег   или  . Этот вариант хорошо работает, если вы планируете минимизировать свой HTML позже с помощью задания gulp или чего-то подобного.

<span ng-repeat="word in words">
    <span class="label label-success">{{word}}</span>&nbsp;
</span>

Таким образом, пространство будет отображаться правильно, даже если ваш HTML-код минимизирован.

Ответ 12

Вы также можете использовать следующий метод, он выполнит работу без директивы.

<div ng-repeat="label in labels">{{label}} <span ng-if="!$last"> </span></div>