2016-12-05 3 views
0

私はヒスイと角度使用していHow to distribute li elements equally?この質問から要素の平等な分配をやろうとしている:によって作成された各要素の後に空白を追加する方法NG-繰り返し

ul 
    li(ng-repeat="item in items") {{item.name}} 

が、NG-繰り返し丼」を各要素の後に改行を作成し、text-align: justifyは機能しません。 ng-repeatによって返されたhtmlの各liの後に改行またはスペースを挿入することは可能ですか?

Plunker

答えて

0

@Fissioソリューションほとんどの仕事は、私はこのCSSを追加する必要があります。 Plunker

1

使用ng-repeat-start and ng-repeat-end

br { 
    display: none; 
} 

とそれが動作:

ul 
    li(ng-repeat-start="step in workflow.data.steps", class="{{step.status|lowercase}}", ng-class="{selected: step.caption == workflow.data.step.caption}") 
    //ng-style="{width: (100/(workflow.data.steps.length > 6 ? 6 : workflow.data.steps.length)) + '%'}" 
    div 
     span.box {{step.caption}} 
     span.status(ng-show="workflow.data.steps.loaded") {{step.status}} 
     span.status(ng-hide="workflow.data.steps.loaded") ... 
    br(ng-repeat-end) 
+0

これは、各liの後にhtmlタグを作成し、htmlのリテラル改行またはスペースを必要とします。 – jcubic

+0

ああ - あなたは 'margin-bottom:10px'のようなCSSを使うことはできませんか?または、デモンストレーションするプランナーを作成できますか? – Fissio

+0

[Plunker](https://plnkr.co/edit/IvwZ77TFE7GkBBpYoUfm?p=preview) – jcubic

0

はちょうどそれは、最初と最後の項目でない場合、それは「BR」を追加しません

<li ng-repeat="your code"> 
<span ng-if="!$first || !$last"><br></span>{{item.name}} 
</li> 

を追加します。それ以外の場合は、改行を追加します

+0

' $ ng-if "$ middle" 'を使ってこれを単純化することもできます。 –

+0

いいえ3つの要素がありません。要素数が3つ以上の場合は –

+0

ng-if = "$ middle"はうまく動作します –

関連する問題