如何在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的范圍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

以下是一些不同的方法：

HTML

您可以使用瀏覽器的本機環繞功能，該功能在遇到空白時會換行。 要強制執行， 請在值后手動插入空格（ 請參閱小提琴 ）：

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

---

CSS

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

1. 在每個跨度后通過CSS插入空格：

    span:after{content:" "} 

2. 浮動跨度

   一個。 如果格造型/邊界並不重要 ：

    span { float:left; } 

   灣 如果格造型/邊界是很重要的 ，也是改變DIV的顯示 ：

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

   注意：除非div上有寬度限制，否則不會進行換行

Answer 5

@ Pavel的回答幫助了我，特別是在<span>上使用ng-repeat作為bootstrap標簽。 這些需要有一個尾隨的空白區域，否則它們之間沒有空間。 加倍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 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

您還可以使用以下方法，它將在沒有指令的情況下完成工作。

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