如何在ng-repeat元素后添加空格？

Question

使用ng-repeat与span元素添加所有span元件一起的w/o在它们之间的空间从而使其成为一个牢不可破线,其不换行:

码:

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

渲染html:

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

这不会包含在一个狭窄的div中.

问题:如何包装？

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

Answer 1

我只有标签有同样的问题......这是我的解决方案:

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

基本上重复ng-repeat-start和ng-repeat-end之间的任何内容,包括空格......不幸的是,这意味着使用额外的span标记.不理想......

Answer 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>

Answer 3

我的解决方案是(注意内跨后的空格字符):

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

Answer 4

@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/

Answer 5

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

或者

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