Wie kann ich AngularJS ng-repeat-Daten in drei Bootstrap-Spalten ausrichten?

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:

<code class="js">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);

Die transformierten chunkedData können dann in der Ansicht 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>

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. Wenn Eingaben innerhalb der gefilterten Ansicht verwendet werden, kann es zu Inkonsistenzen kommen.

<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 Spalten

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

<code class="js">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;
}

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

CSS-Spalten

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

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

<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 kann ich AngularJS ng-repeat-Daten in drei Bootstrap-Spalten ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!