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

Posted 2023-03-06

【中文标题】如何在 ng-repeat 元素后添加空格？

【英文标题】：How to add a space after ng-repeat element?

【发布时间】：2013-08-28 08:24:06

【问题描述】：

使用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/

【问题讨论】：

我看不出这个例子有什么关系...

@elclanrs 小提琴已更新。

如果在span 中添加空格，如label 。那应该环绕jsfiddle.net/6e8Bn/4

@elclanrs 没有看到你的评论——显然我们在想同样的事情

我认为这是一个很好的问题。我希望我能得到更多帮助（来自 Knockout）我现在才开始研究 Angular 进行比较。它引出了更基本的问题：角度元素可以自我参照吗？ ng-repeat 有回调吗？如果这些问题中的任何一个是肯定的，那么在元素之后插入一个空格会很容易，尤其是对于像 jQuery 这样的库。否则，您可能需要考虑不同的解决方法。

【参考方案1】：

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

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

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

【讨论】：

我希望我能给你所有的分数。 ng-repeat-start 和 ng-repeat-end 可能是对大多数人有帮助的答案。

为什么不 ng-repeat="label in labels" ng-bind="label + ' '"

【参考方案2】：

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

【讨论】：

这应该是公认的解决方案。像魅力一样工作，非常优雅。我会用' '而不是' '因为 NBSP 是“不可破坏的”，并且会防止内联（非内联块）元素分解。

同意汤姆关于non-breaking 是非破坏性的;)

谢谢@Tom，你是对的。它对我有用，因为我只是间隔一行。它可能不允许使用不间断空间进行换行，尽管我还没有实际测试过。我也相信你的空格字符代码可以工作，因为我也没有测试过。

【参考方案3】：

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

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

【讨论】：

对这个简单但有效的答案没有足够的爱

【参考方案4】：

@Pavel 的回答帮助了我，特别是在 <span> 上使用 ng-repeat 作为引导标签。这些需要有一个尾随空格，否则它们之间没有空间呈现。将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/

【讨论】：

它不起作用。你需要添加  因为大多数人可能会使用 html minifier...

【参考方案5】：

这里有几种不同的方法：

HTML

您可以使用浏览器的原生换行功能，该功能会在遇到空白时进行换行。要强制执行，请在值后手动插入一个空格 (see fiddle)：

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

---

CSS

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

在每个 span 之后通过 CSS 插入空格：

span:aftercontent:" "

浮动跨度

一个。如果div styling/border IS NOT important：

span  float:left; 

b.如果div styling/border IS important，也改变div的显示：

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

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

【讨论】：

奇怪的是，当它是唯一解决 OP 问题的答案时，这是唯一被否决的答案。 :::: 其他答案只在每个元素之后插入换行符，而这将使它们保持在同一行，直到它到达容器的末尾并无缝换行。

OP 已询问跨度之间的空间。不在跨度中。

@OlegGolovanov 没有。这是老问题，但请阅读问题而不是标题。他想要什么不能做，或者我不知道该怎么做。这是我当时找到的唯一解决方法。

@OlegGolovanov 抱歉，我有点忙于详细介绍，主要是空格会在段落中包裹文本等元素。是的，他想要<span /> 之后的空格，但想使用 Angular 来做到这一点——用 jQuery 很容易做到，但我（现在仍然）不确定如何使用 Angular。请参阅我在问题下的评论。但似乎托伦斯可能想出了另一种解决方法。从那以后我没有对 Angular 做太多事情，但问题仍然是 Angular 对象是否可以自引用。

【参考方案6】：

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

这是小提琴 - JSFiddle

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

【参考方案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/

【参考方案8】：

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

或

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

【讨论】：

谢谢，但我真的不希望 或 因为我希望标签看起来像一行或多行，像普通文本一样换行。

@user198313 如果你使用br看到行间距，那么它应该是在html中定义的一些css。理论上，br 不会创建任何换行符。

【参考方案9】：

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

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

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

【参考方案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 "];

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

【参考方案11】：

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

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

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

【参考方案12】：

你也可以使用下面的方法，不用指令就可以完成工作。

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