javascript 如何在 ng-repeat 元素后添加空格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18434086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a space after ng-repeat element?
提问by user198313
Using ng-repeatwith spanelements adds all spanelements together w/o space between them thus making it an unbreakable line which does not wrap:
使用ng-repeatwith spanelements 将所有元素添加span在一起，它们之间没有空格，从而使其成为不折行的牢不可破的行：
Code:
代码：
<span ng-repeat="label in labels">{{label}}</span>
renders html:
呈现 html：
<span>label1</span><span>label 2</span><span>label3</span><span>label 3</span><span>label5</span><span>label 4</span>
This does not wrap in a narrow div.
这不会包含在狭窄的 div 中。
Question: how to make it wrap?
问题：如何让它包裹起来？
回答by JustMaier
I have the same problem only with a tags... Here was my solution:
我只有标签有同样的问题......这是我的解决方案：
<span ng-repeat-start="label in labels" ng-bind="label"></span> <span ng-repeat-end></span>
Basically anything between ng-repeat-start and ng-repeat-end will be repeated, including whitespace... Unfortunately, this meant using an extra span tag. Not ideal...
基本上 ng-repeat-start 和 ng-repeat-end 之间的任何内容都会被重复，包括空格......不幸的是，这意味着使用额外的 span 标签。不理想...
回答by TorranceScott
I solved the problem nicely with css. Just change the span to display:inline-blockand it will wrap properly.
我用css很好地解决了这个问题。只需将跨度更改为display:inline-block，它就会正确包装。
However, in my specific situation this didn't work. I needed the space so that the elements would behave properly when text-align:justifywas applied to them (evenly spacing them in the parent). So I made a directive:
但是，在我的特定情况下，这不起作用。我需要空间，以便元素在text-align:justify应用于它们时能够正常运行（在父级中均匀地间隔它们）。所以我做了一个指令：
angular.module('whatever')
.directive('addASpaceBetween', [function () {
'use strict';
return function (scope, element) {
if(!scope.$last){
element.after(' ');
}
}
}
]);
and then in the html:
然后在 html 中：
<span data-ng-repeat="(id, thing) in things" data-add-a-space-between>stuff</span>
回答by Pavel
My solution is (note the space character after inner span):
我的解决方案是（注意内部跨度后的空格字符）：
<span ng-repeat="gate in gates"><span class="label label-info">{{gate}}</span> </span>
回答by vol7ron
Here are a few different approaches:
以下是几种不同的方法：
HTML
HTML
You could use the browser's native wrapping feature, which wraps when white-space is encountered. To enforce it, manually insert a space after the value (see fiddle):
您可以使用浏览器的本机换行功能，该功能会在遇到空格时进行换行。要强制执行它，请在值后手动插入一个空格（请参阅 fiddle）：
<span ng-repeat="label in labels">{{label}} </span>
CSS
CSS
An alternative is to use some CSS tricks:
另一种方法是使用一些 CSS 技巧：
Insert white-space via CSS after each span:
span:after{content:" "}Floating the Spans
a. If div styling/border IS NOTimportant:
span { float:left; }b. If div styling/border ISimportant, also change displayof div:
div { display:inline-block; } span { float:left; }Note: wrapping won't occur unless there is a width restriction on the div
在每个跨度后通过 CSS 插入空格：
span:after{content:" "}浮动跨度
一个。如果格造型/边框IS NOT重要：
span { float:left; }湾 如果格造型/边框IS重要，也改变显示的div：
div { display:inline-block; } span { float:left; }注意：除非 div 有宽度限制，否则不会发生换行
回答by Jonathan
@Pavel's answer helped me, specifically using ng-repeaton a <span>for bootstrap labels. These need to have a trailing white space otherwise there's no space rendered between them. Doubling up the spanso the label label-defaultclass is not on the same spanas the ng-repeatdoes the trick.
@Pavel 的回答对我有帮助，特别是ng-repeat在<span>for bootstrap 标签上使用。这些需要有一个尾随空白，否则它们之间没有空间呈现。加倍了span，因此label label-default类是不在同一span作为ng-repeat的伎俩。
<span ng-repeat="value in values">
<span class="label label-default">{{value}}</span>
</span>
回答by Nix
回答by dnozay
You can use ng-classand add a class for all but the last element.
您可以ng-class为除最后一个元素之外的所有元素使用和添加一个类。
<span ng-repeat="label in labels"
ng-class="{space:!$last,last:$last}">{{label}}</span>
and
和
span.space:after {
// content: ', '; // I like comma separated
content: ' ';
}
Here is the fiddle. http://jsfiddle.net/dnozay/d3v6vq7w/
回答by gustavohenke
That's more of a style problem, not a logic one.
Maybe the following can help you:
这更像是一个风格问题，而不是一个逻辑问题。
或许以下几点可以帮到你：
<div><span ng-repeat="label in labels">{{label}}</span></div>
If you need further styling to make it fit into your app, try clarifying your question, but I hope you get the point.
如果您需要进一步的样式以使其适合您的应用程序，请尝试澄清您的问题，但我希望您明白这一点。
回答by shaunhusain
Vol7ron's answer is acceptable otherwise you can add a space into the end of the data elements. Really does this have a real world use case?
Vol7ron 的回答是可以接受的，否则您可以在数据元素的末尾添加一个空格。这真的有真实世界的用例吗？
You can see I did a couple of spans outside of any angular based context and the same behavior is exhibited. Apparently as the browser renders a single word on a line and doesn't do hyphenated breaking of words across lines if there is no space it simply continues onward to the right.
你可以看到我在任何基于角度的上下文之外做了几个跨度，并且表现出相同的行为。显然，当浏览器在一行上呈现单个单词并且如果没有空格时不会跨行进行连字符断字，它只会继续向右移动。
<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 spaces added to data:
添加到数据的 Javascript 空格：
$scope.labels=["alongwooooooooord ", "alongwooooooooord2 ", "alongwooooooooord3 ", "ealongwooooooooord5 ", "falongwooooooooord5 "];
So ultimately the issue here isn't angular or anything related to the repeat but just how browsers interpret this.
所以最终这里的问题不是角度问题或任何与重复相关的问题，而是浏览器如何解释这个问题。
回答by zs2020
<span ng-repeat="label in labels">{{label}}<br/></span>
or
或者
<div ng-repeat="label in labels">{{label}}</div>
