AngularJS ng-repeat-Daten in drei Bootstrap-Spalten ausrichten

AngularJS bietet ng-repeat zum dynamischen Erstellen von Elementen basierend auf einem Datenarray. Wenn Sie mit einer großen Anzahl von Elementen arbeiten, kann die Ausrichtung in Spalten die Benutzeroberfläche und Lesbarkeit verbessern.

Controller-basierte Transformation

Der bevorzugte Ansatz besteht darin, die Daten innerhalb der zu transformieren Controller mithilfe der Chunk-Funktion von JavaScript, die die Daten in gleichmäßig große Gruppen aufteilt:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
Die transformierten chunkedData können dann in der Ansicht wie folgt gerendert werden:

  
{{item}}
Filtern in der Ansicht (Vorsicht)
Obwohl dies möglich ist, wird die Verwendung von Filtern zum Aufteilen der Daten in der Ansicht für Datenbindungszwecke nicht empfohlen. Werden Eingaben innerhalb der gefilterten Ansicht verwendet, kann es zu Inkonsistenzen kommen.
<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">
  <div class="column" ng-repeat="item in row">
    {{($parent.$index*row.length) $index 1}}. {{item}}
  </div>
</div>

Vertikale Spalten

Um Elemente vertikal statt horizontal auszurichten, kann eine Variation der Chunking-Methode verwendet werden:

function columnize(input, cols) {
  var arr = [];
  for(i = 0; i < input.length; i  ) {
    var colIdx = i % cols;
    arr[colIdx] = arr[colIdx] || [];
    arr[colIdx].push(input[i]);
  }
  return arr;
}

<div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{item}}
  </div>
</div>

CSS-Spalten

Eine weitere Option zum Erstellen vertikaler Spalten ist die Nutzung von CSS-Spalten:

.columns {
  columns: 3;
}

<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>