3

これが私の例です：http：//jsfiddle.net/rtCP3/62/

私は3つ（またはそれ以上！）のdivを持っています。1つのコンテナに均等に配置したいと思います。ng-repeatでangularを使用すると、スタイルが選択されません。まったく同じ要素をハードコーディングすると、問題なく機能します。

角度出力：

<div class="container ng-scope" ng-controller="ParentCtrl">
     <!-- ngRepeat: item in list -->
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item1</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item2</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item3</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item4</div>
     <span class="stretch"></span>
</div>

ハードコード：

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <span class="stretch"></span>
</div>

私はこれをこのスタックオーバーフローの質問に基づいています：等間隔のDIVを持つ流体幅

4

2 に答える 2

3

これは機能します。理由はわかりませんが、同じ間隔で配置されます。

 <div class="container" ng-controller="ParentCtrl">
     <span data-ng-repeat="item in list">
         <div class="box">{{ item.name }}</div>
     </span>
     <span class="stretch"></span>
 </div>

誰か他の人がそれが機能する理由を説明できるかもしれませんが、あなたのフィドルではspan要素を繰り返していますが、内部のboxクラスを使用すると、両方の実装が同じように見えます。

于 2013-02-28T16:46:43.783 に答える
1

あなたが参照するSOの質問のコメントは言う

HTMLの各ボックスの間にスペースが必要であることがわかるまでに3時間かかりました。「Justify」は要素間のスペースを拡張し、コンテンツが<div/><div/><div/>そうである場合は機能しません。あなたは持っている必要があります<div/> <div/> <div/>。

ng-repeatは出力の間にスペースを入れないので、すべてのdivが互いに正対していて、問題が発生していると思います。

スペースを追加する独自のng-repeatのようなディレクティブを作成できます。

于 2013-02-28T18:44:13.497 に答える