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>