1

アプリケーションで段落ビューを作成したいと考えています。このビューでは、5 つのアイテムごとに 1 つのブロックに表示され、1 つが下に表示され、次の 5 つが次のブロックに表示されます。

例：

<div style="display:inline-block">
 <div style="display:inline-block">
   <div style="display:block">1.-----</div>
   <div style="display:block">2.-----</div>
   <div style="display:block">3.-----</div>
   <div style="display:block">4.-----</div>
   <div style="display:block">5.-----</div>
 </div>

 <div style="display:inline-block">
   <div style="display:block">6.-----</div>
   <div style="display:block">7.-----</div>
   <div style="display:block">8.-----</div>
   <div style="display:block">9.-----</div>
   <div style="display:block">10.-----</div>
 </div>
</div>

したがって、基本的には、一度に 5 つの要素を進める 1 つと、一度に 1 つの要素を進める 2 つのネストされた反復のような醜いことをする必要があります。

または、私が使用している Angular バージョンでは使用できない ng-if ディレクティブ。

4

1 に答える 1

1

技術的には、ng-repeatそれを達成するために1つを使用できます（なしでng-if）。次のようなことを試してください：

<div style="display:inline-block" ng-repeat="item in items">
    <div style="display:inline-block" ng-show="$index % 5 == 0">
        <div style="display:block">{{items[$index+0].content}}</div>
        <div style="display:block">{{items[$index+1].content}}</div>
        <div style="display:block">{{items[$index+2].content}}</div>
        <div style="display:block">{{items[$index+3].content}}</div>
        <div style="display:block">{{items[$index+4].content}}</div>
    </div>
</div>

デモ: http://jsfiddle.net/kpgbx/

于 2013-09-23T16:26:07.777 に答える