Wie werden Wells im Bootstrap in zwei verschiedenen Spalten angeordnet?

Question

Ich möchte meine Liste der Brunnen in zwei verschiedenen Spalten zu ordnen. Ich habe meinen Plunker Link https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview angeschlossen.

Das ist meine Ansicht

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

Das ist mein Controller

$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 
     } 
    } 
    } 
} 
}); 

Ich möchte aaaa, bbbb, cccc in einer Spalte und ddddd, eeee, fffff in einer anderen Spalte ist. Wie arrangiere ich diese?

Answer 1

Hier ist ein Weg, wie ich es mit Hilfe von Boostrap Grid System row.column tun kann.

Die ng-repeat wird von $index verfolgt. Von dort aus können Sie mit Hilfe von ng-show festlegen, welche Daten Sie selektiv anzeigen möchten. Auf diese Weise können Sie es in zwei Spalten anzeigen. Hier

ist die Plunker Link:

Updated Plunker.

HINWEIS: Als Alternative Sie etwas anderes als das Bootstrap-Grid-System verwenden können, wenn Sie Ihre eigenen Spalten anpassen möchten.

Answer 2

Wenn Sie 2 Spalten verwenden Sie eine der col-xs-6, col-sm-6, col-md-6 oder col-lg-6 Klassen innerhalb des class Attribut des iterativen Element

etwa so:

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

Aber Sie würden nicht in der Lage sein, sortiere sie so, wie du es möchtest, weil Schlüssel-/Werteinträge in Objekten nicht geordnet sind. Wenn du sie mit einem Schlüssel + Wert ng-repeat iterierst, kannst du eine Bestellung nicht garantieren, auch wenn du denkst, dass verschiedene Implementierungen von JavaScript Engines möglich sind über sie anders iterieren. Wenn Sie möchten, dass sie wie beschrieben sortiert werden, wäre der einfachste Ansatz, ein Array zu verwenden und sie so zu sortieren/mischen, wie Sie möchten.

mag: ['aaaa', 'ddddd', 'bbbb' .......]

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