2つの異なる列にブートストラップのウェルを配置するにはどうすればよいですか？

Question

私の井戸のリストを2つの異なる列に並べたいと思っています。私はplunkerリンクhttps://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=previewを添付しました。

この

は、これは私のコントローラ

$scope.myData={ 
    "_id": "ui", 
    "config": { 
    "A": { 
     "aaaa": { 
     "required": true, 
     "editable": true 
     }, 
     "bbbbb": { 
     "required": true, 
     "editable": true 
     }, 
     "ccccc": { 
     "required": true, 
     "editable": false 
     }, 
     "ddddd": { 
     "required": true, 
     "editable": true 
     }, 
     "eeeee": { 
     "required": true, 
     "editable": true 
     }, 
     "fffff": { 
     "required": true, 
     "editable": true 
     } 
    } 
    } 
} 
}); 

私は別の列に1列とDDDDD、EEEE、FFFFFでAAAA、BBBB、CCCCをしたいです私の見解

<div class="well well-lg" ng-repeat="(key, data) in myData.config.A" style="width:500px;">{{key}}</div> 
     </div> 

です。これらを手配する方法は？

Answer 1

これはBoostrapのグリッドシステムrow.columnを使って考えることができる方法です。

ng-repeatは$indexによって追跡されます。そこから、ng-showを使用して、選択的に表示するデータを指定できます。この方法で、2つの列に表示することができます。あなたがあなた自身の列をカスタマイズしたい場合は、ブートストラップグリッドシステム以外のものを使用することができます別の方法として：

Updated Plunker.

注：ここでは

はplunkerリンクです。

Answer 2

あなたは2列が

そうのようなあなたの反復要素のclass属性内col-xs-6の1、col-sm-6、col-md-6またはcol-lg-6クラスを使用する場合：

<div class="well well-lg col-xs-6" ng-repeat="(key, data) in myData.config.A" style="width:500px;">{{key}}</div> 

しかし、あなたがすることができませんオブジェクトのキー/値のエントリが順序付けされていないため、キー+値ng-repeatを使用して反復処理するため、順序を保証することはできません。それらを異なる方法で繰り返します。 説明したとおりに並べ替えたい場合は、最も簡単な方法は配列を使用して、必要に応じて並べ替え/シャッフルすることです。

のような：['aaaa', 'ddddd', 'bbbb' .......]

<div class="well well-lg col-xs-6" ng-repeat="data in myData" style="width:500px;">{{data }}</div>