如何在 ng 重复元素后添加空格

How to add a space after ng-repeat element?

本文关键字：元素 添加 空格 ng      更新时间：2023-09-26

将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/

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

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

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

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

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

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

@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

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

<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 有宽度限制，否则不会发生换行

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

这是小提琴 - JSFiddle

span {display:inline-block; margin-right:2px;}
您可以使用

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/

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

或

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

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

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

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

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

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

您要查找的是&nbsp;或&#160;标签。如果您计划稍后使用 gulp 任务或类似任务缩小 HTML，则此选项非常有效。

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

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

您也可以使用以下方法，它将在没有指令的情况下完成工作。

<div ng-repeat="label in labels">{{label}} <span ng-if="!$last"> </span></div>
相关文章：