HTML

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很好地解决了这个问题。只需将范围更改为display:inline-block，它就会正确换行。

然而，在我的具体情况下，这不起作用。我需要空间，以便在text-align:justify应用于它们时将元素正常运行（在父节点中均匀间隔它们）。所以我做了一个指示：

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

然后在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

以下是一些不同的方法：

HTML

您可以使用浏览器的原生包装功能，该功能在遇到空白时会换行。要强制执行此操作，请在值（see fiddle）之后手动插入空格：

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

CSS

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

每个跨度后通过CSS插入空格：
```
span:after{content:" "}
```
浮动跨度

一个。如果div styling/border IS NOT important：
```
span { float:left; }
```
湾如果div styling/border IS important，还要更改div的显示：
```
div { display:inline-block; }
span { float:left; }
```
注意：除非div上有宽度限制，否则不会发生包装

Answer 5

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

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

这是小提琴 - 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>

Answer 9

这更像是一种风格问题，而非逻辑问题也许以下内容可以帮助您：

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

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

Answer 10

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

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

你可以看到我在任何基于角度的背景之外做了几个跨度，并且表现出相同的行为。显然，当浏览器在一行上呈现单个单词时，如果没有空格，则不会在行之间对单词进行连字断开，它只是继续向右移动。

<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空间：

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

所以最终这里的问题不是角度或与重复相关的任何事情，而是浏览器如何解释这一点。

Answer 11

您要查找的是 或 标记。如果您计划稍后使用gulp任务或类似的东西缩小HTML，则此选项很有效。

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

这样即使您的html代码缩小，空间也会正常显示。

Answer 12

您还可以使用以下方法，无需指令即可完成工作。

store/index.js

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

12 个答案:

HTML

CSS