2017-06-17 11 views
0

Angularでは非常に新しく、繰り返しを実行しているテーブル要素でng-repeatを使用しているページがあります。例は次のとおりです。Angular ng-repeat tableが並んで交互に表示される

Inline

私は、以下の次の行に継続横並びになり、他のすべてのテーブルを交互にされたいと思うパートナーはどのような:

Alternating

任意の提案は素晴らしいだろう...

答えて

0

ブートストラップを使用してこの構造を作成できます。これはangularjsとは関係ありません。
あなたは今、あなたがこのような構造配置の一部が角よりもむしろブートストラップにもっとある

0

を移入することができますどのようにアイデアを持っているこの

<div class="row"> 

    <div class="col-md-6 pull-left" ng-repeat="x in tables"> 
    <table> 
     <thead> 
     <th>Table#{{$index}}</th> 
     </thead> 
     <tbody> 
     <tr ng-repeat="r in rows"> 
     your td here... 
     </tr> 
     </tbody> 

    </table> 
    </div> 
</div> 


希望のようなあなたのページを構築することができます。

すべてのページが12列に分割されています。あなたはちょうど各テーブルに必要な列の適切な量を選択することになっています。

左半分の場合、divクラスはcol-md-6になります。次にcol-md-6を使用すると、自動的にページの右半分に移動します。

あなたはそれについてもっと読むことができます:Bootstrap layout and positioning

関連する問題