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

使用

ng repeat

和

span

元素将所有

span

元素添加到一起，它们之间没有空格，从而使其成为一条不可分割的线，不会缠绕：

代码：

{{label}

呈现html：

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

Label1标签2标签3标签5标签4

这不是一个狭窄的隔间

问题：如何包装

{{label}}

或

{{label}

以下是几种不同的方法：

HTML 您可以使用浏览器的本机换行功能，当遇到空白时，该功能会换行。若要强制执行，请在值（）后手动插入空格：

浮动跨距

a。如果：

b。如果，也更改div的显示：

注意：除非div上有宽度限制，否则不会进行包装

---

这更多的是风格问题，而不是逻辑问题。
也许以下内容可以帮助您：

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

{{label}

---

如果您需要进一步的样式设计以使其适合您的应用程序，请尝试澄清您的问题，但我希望您能理解这一点。

Vol7ron的回答是可以接受的，否则您可以在数据元素的末尾添加一个空格。这真的有真实世界的用例吗

你可以看到，我在任何基于角度的上下文之外做了几个跨度，并且展示了相同的行为。显然，当浏览器在一行上呈现一个单词时，如果没有空格，它就不会跨行断字，而是继续向右移动

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

---

因此，这里的最终问题不是角度或与重复相关的任何内容，而是浏览器如何解释这一点。

如果vol7ron的响应不起作用，您可以内联显示跨距，并在跨距上添加边距

这是小提琴-

---

我只有一个标签有同样的问题。。。以下是我的解决方案：

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

基本上，在ng repeat start和ng repeat end之间的任何内容都将被重复，包括空格。。。不幸的是，这意味着要使用额外的span标记。不理想…

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

{{gate}

我用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>

东西

您可以使用

ng class

并为除最后一个元素之外的所有元素添加一个类

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

这是小提琴。

---

@Pavel的回答帮助了我，特别是在

上使用

ng repeat

作为引导标签。它们需要有一个尾随空白，否则它们之间就没有渲染的空间。将

span

加倍，使

label-label-default

类与

ng-repeat

不在同一

span

上

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

{{value}}

---

你要找的是

或

 标签。如果您计划稍后通过“吞咽”任务或类似任务缩小HTML，则此选项非常有效

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


{{word}}

这样，即使html代码缩小，空间也会正确显示。
您也可以使用以下方法，它将在没有指令的情况下完成工作

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

{{label}
我看不出这个例子有什么关系…@elclanrs fiddle更新了。如果你在
span
中添加空格，比如
{{label}
，会怎么样。这应该可以概括为@elclanrs没有看到你的评论——显然我们也在想同样的事情。我认为这是一个好问题。我希望我能提供更多的帮助（来自淘汰赛），我现在才开始考虑比较。它引出了更基本的问题：角元素能自我参照吗？
ng repeat
上是否有回调？如果这两个问题中有一个是肯定的，那么在元素后面插入空格就很容易了，特别是对于jQuery这样的库。否则，你可能想考虑一个不同的解决方法。谢谢，但是我真的不希望
或者我希望标签看起来像一行或更多，就像普通文本一样包装。@ USSRe3313如果你看到了行之间的间距，如果你使用了<代码> BR>代码>，那么它应该是HTML中定义的一些CSS。理论上，
br
不会创建任何换行符。奇怪的是，当这是唯一一个解决OP问题的答案时，这是唯一被否决的答案其他答案仅在每个元素后插入换行符，而这将使它们保持在同一行上，直到到达容器的末尾，并且无需换行。OP询问了跨距之间的间距。奥列戈洛瓦诺夫：不。这是一个老问题，但请阅读问题而不是标题。他想要不能做的，或者我不知道怎么做的。这是我当时找到的唯一解决办法。@OlegGolovanov对不起，我有点忙，没有时间详细介绍，主要的是空白将像段落中的文本一样包装元素。是的，他想在
后面加一个空格，但他想用angular来实现这一点——用jQuery很容易，但我（现在仍然）不确定如何使用angular。请参阅我在问题下的评论。但托伦斯似乎想出了另一个解决办法。从那以后，我就没有做过很多关于角度的研究，但问题是角度物体是否可以自我参照。我希望我能给你所有的要点
ng repeat start
和
ng repeat end
可能是对大多数人有帮助的答案。为什么不ng repeat=“标签中的标签”ng bind=“标签+””这应该是公认的解决方案。作品很有魅力，非常优雅。我只会用“ ；”而不是“”，因为NBSP是“不可破坏的”，并且将阻止内联（而不是
$scope.labels=["alongwooooooooord ", "alongwooooooooord2 ", "alongwooooooooord3 ", "ealongwooooooooord5 ", "falongwooooooooord5 "];

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

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

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

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

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

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

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

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

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

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