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

Question

使用ng-repeat 和span 元素将所有span 元素加在一起，它们之间没有空格，从而使其成为一条不会换行的牢不可破的线：

代码：

<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 很好地解决了这个问题。只需将 span 更改为 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 的回答帮助了我，特别是在 <span> 上使用 ng-repeat 作为引导标签。这些需要有一个尾随空格，否则它们之间没有空间呈现。将span 加倍，因此label label-default 类与ng-repeat 不在同一个span 上。

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

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

Answer 5

这里有几种不同的方法：

HTML

您可以使用浏览器的原生换行功能，该功能会在遇到空白时进行换行。要强制执行，请在值后手动插入一个空格 (see fiddle)：

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

---

CSS

另一种方法是使用一些 CSS 技巧：

1. 在每个 span 之后通过 CSS 插入空格：

   span:after{content:" "}
   

2. 浮动跨度

   一个。如果div styling/border IS NOT important：

   span { float:left; }
   

   b.如果div styling/border IS important，也改变div的显示：

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

   注意：除非 div 有宽度限制，否则不会发生换行

Answer 6

如果 vol7ron 的响应不起作用，您可以内联显示 span 并为其添加边距。

这是小提琴 - JSFiddle

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

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

Answer 8

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

或

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