Wie verteile ich ng-repeat-Daten mithilfe von Bootstrap in AngularJS in Spalten?

Verteilen von ng-Repeat-Daten in Spalten mithilfe von Bootstrap

In AngularJS ist die Nutzung von ng-Repeat von grundlegender Bedeutung, wenn mit sich wiederholenden Daten gearbeitet wird. Allerdings besteht häufig die Notwendigkeit, diese Elemente in einem optisch ansprechenden Layout zu organisieren, beispielsweise in drei unterschiedlichen Spalten. Um dies zu erreichen, beschäftigen wir uns mit verschiedenen Ansätzen, darunter Lösungen auf Controller-Ebene und auf Ansichtsebene.

Transformation auf Controller-Ebene

Ein robuster Ansatz liegt in der Transformation der Daten innerhalb des Controllers. Durch die Nutzung der bereitgestellten Chunk-Funktion können wir die Daten in gleiche Unterarrays aufteilen, die jeweils eine Spalte darstellen:

<code class="javascript">function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i<arr.length; i+=size) {
    newArr.push(arr.slice(i, i+size));
  }
  return newArr;
}

$scope.chunkedData = chunk(myData, 3);

Diese Daten können dann mit einer verschachtelten NG-Wiederholung wie folgt gerendert werden:

<code class="html"><div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div></code>

Filterung auf Ansichtsebene

Alternativ kann ein Filter verwendet werden, um das gewünschte Layout innerhalb der Ansicht zu erreichen. Dieser Ansatz ist jedoch in erster Linie für Anzeigezwecke gedacht und kann bei der Einbindung von Eingabeelementen zu Problemen führen:

<code class="html"><pre class="brush:php;toolbar:false"><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 Spaltenanordnung

Um Elemente vertikal statt horizontal zu verteilen, Leichte Änderungen an den oben genannten Ansätzen können vorgenommen werden:

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

<code class="javascript">var data = ['a','b','c','d','e','f','g'];
$scope.columns = columnize(data, 3);
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;
}

CSS-Spalten

Eine weitere elegante Lösung besteht in der Nutzung von CSS-Spalten:

<code class="css">.columns {
  columns: 3;
}

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

Das obige ist der detaillierte Inhalt vonWie verteile ich ng-repeat-Daten mithilfe von Bootstrap in AngularJS in Spalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!