How to add a space after ng-repeat element?

Question

Using ng-repeat with span elements adds all span elements together w/o space between them thus making it an unbreakable line which does not wrap:

Code:

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

renders html:

<span>label1</span><span>label 2</span><span>label3</span><span>label 3</span><span>label5</span><span>label 4</span>

This does not wrap in a narrow div.

Question: how to make it wrap?

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

Answer 1

I have the same problem only with a tags... Here was my solution:

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

Basically anything between ng-repeat-start and ng-repeat-end will be repeated, including whitespace... Unfortunately, this meant using an extra span tag. Not ideal...

Answer 2

I solved the problem nicely with css. Just change the span to display:inline-block and it will wrap properly.

However, in my specific situation this didn't work. I needed the space so that the elements would behave properly when text-align:justify was applied to them (evenly spacing them in the parent). So I made a directive:

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

and then in the html:

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

Answer 3

我的解决方案是（注意内跨后的空格字符）：

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

Answer 4

Here are a few different approaches:

HTML

You could use the browser's native wrapping feature, which wraps when white-space is encountered. To enforce it, manually insert a space after the value ( see fiddle ):

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

---

CSS

An alternative is to use some CSS tricks:

1. Insert white-space via CSS after each span:

    span:after{content:" "} 

2. Floating the Spans

   a. If div styling/border IS NOT important :

    span { float:left; } 

   b. If div styling/border IS important , also change display of div:

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

   Note: wrapping won't occur unless there is a width restriction on the div

Answer 5

@Pavel's answer helped me, specifically using ng-repeat on a <span> for bootstrap labels. These need to have a trailing white space otherwise there's no space rendered between them. Doubling up the span so the label label-default class is not on the same span as the ng-repeat does the trick.

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

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

Answer 6

If vol7ron's response doesn't work, you may display spans inline and add margin right to them.

Here's the fiddle - JSFiddle

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

Answer 7

You can use ng-class and add a class for all but the last element.

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

and

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

Here is the fiddle. http://jsfiddle.net/dnozay/d3v6vq7w/

Answer 8

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

要么

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

Answer 9

That's more of a style problem, not a logic one.
Maybe the following can help you:

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

If you need further styling to make it fit into your app, try clarifying your question, but I hope you get the point.

Answer 10

Vol7ron's answer is acceptable otherwise you can add a space into the end of the data elements. Really does this have a real world use case?

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

You can see I did a couple of spans outside of any angular based context and the same behavior is exhibited. Apparently as the browser renders a single word on a line and doesn't do hyphenated breaking of words across lines if there is no space it simply continues onward to the right.

<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 spaces added to data:

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

So ultimately the issue here isn't angular or anything related to the repeat but just how browsers interpret this.

Answer 11

What you looking for is the   or   tag. This option works well if you plan to minify your HTML later with a gulp task or something similar.

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

This way the space will show properly even if your html code is minified.

Answer 12

您还可以使用以下方法，它将在没有指令的情况下完成工作。

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