21

使用ng-repeatwithspan元素将所有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/

4

12 回答 12

34

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

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

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

于 2013-10-22T00:25:52.010 回答
15

我用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>
于 2014-06-27T22:18:56.470 回答
8

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

<span ng-repeat="gate in gates"><span class="label label-info">{{gate}}</span> </span>
于 2013-10-25T13:40:17.940 回答
4

以下是几种不同的方法：

HTML

您可以使用浏览器的本机包装功能，该功能在遇到空白时进行包装。要强制执行它，请在值之后手动插入一个空格（请参阅小提琴）：

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

CSS

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

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

    span:after{content:" "}

  2. 浮动跨度

    一个。如果div 样式/边框不重要：

    span { float:left; }

    湾。如果div 样式/边框很重要，还要更改div 的显示：

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

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

于 2013-08-25T22:27:10.053 回答
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/

于 2016-01-22T15:19:12.197 回答
1

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

这是小提琴 - JSFiddle

span {display:inline-block; margin-right:2px;}
于 2013-09-02T09:34:48.983 回答
1

您可以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/

于 2015-05-15T18:25:35.037 回答
0

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 "];

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

于 2013-08-26T01:30:58.160 回答
0 
<span ng-repeat="label in labels">{{label}}<br/></span>

或者

<div ng-repeat="label in labels">{{label}}</div>
于 2013-08-25T21:55:42.517 回答
0

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

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

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

于 2013-08-25T22:33:24.453 回答
0

你要找的是&nbsp;or&#160;标签。如果您打算稍后使用 gulp 任务或类似的东西来缩小 HTML，则此选项非常有效。

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

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

于 2017-05-22T02:10:14.173 回答
0

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

<div ng-repeat="label in labels">{{label}} <span ng-if="!$last"> </span></div>
于 2019-08-20T19:31:34.083 回答