21

ng-repeatwith要素を使用すると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/

4

12 に答える 12

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 に答える
4

いくつかの異なるアプローチを次に示します。

HTML

空白が検出されたときにラップするブラウザーのネイティブ ラッピング機能を使用できます。強制するには、値の後にスペースを手動で挿入します ( fiddle を参照)。

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

CSS

別の方法は、いくつかの CSS トリックを使用することです。

  1. 各スパンの後に CSS を介して空白を挿入します。

    span:after{content:" "}

  2. スパンのフローティング

    a. div スタイル/境界線が重要でない場合:

    span { float:left; }

    b. divスタイル/ボーダーが重要な場合は、div の表示も変更します。

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

    注: div に幅制限がない限り、折り返しは発生しません

于 2013-08-25T22:27:10.053 に答える
4

@Pavelの答えは、特にブートストラップラベルng-repeatに onを使用するのに役立ちました。<span>これらには末尾の空白が必要です。そうしないと、それらの間に空白が表示されません。クラスが と同じにならないspanように を2 倍にすると、うまくいきます。label label-defaultspanng-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

最後の要素を除くすべての要素に対してクラスを使用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 に答える
1

vol7ron の応答が機能しない場合は、スパンをインラインで表示し、それらにマージンを追加することができます。

これがフィドルです-JSFiddle

span {display:inline-block; margin-right:2px;}
于 2013-09-02T09:34:48.983 に答える
0

Vol7ron の回答は受け入れられます。それ以外の場合は、データ要素の末尾にスペースを追加できます。本当にこれには実際のユースケースがありますか?

http://jsfiddle.net/6e8Bn/6/

角度ベースのコンテキスト外でいくつかのスパンを実行したことがわかりますが、同じ動作が示されています。どうやら、ブラウザーは 1 行に 1 つの単語をレンダリングし、スペースがない場合、行をまたいで単語をハイフンで区切ることはしないため、単純に右に進みます。

<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

それはスタイルの問題であり、論理的な問題ではありません。
たぶん、以下があなたを助けることができます：

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

アプリに適合させるためにさらにスタイリングが必要な場合は、質問を明確にしてみてください。ただし、要点を理解していただければ幸いです。

于 2013-08-25T22:33:24.453 に答える