Wie teile ich ng-repeat-Daten mithilfe von Bootstrap in drei Spalten auf?

NG-Repeat-Daten mithilfe von Bootstrap in drei Spalten aufteilen

Bei der Arbeit mit ng-Repeat in AngularJS ist es üblich, Daten in mehreren Spalten anzuordnen. In diesem Artikel werden verschiedene Methoden zum Aufteilen von ng-repeat-Daten in drei Spalten mithilfe von Bootstrap untersucht.

Datentransformation im Controller

Der zuverlässigste Ansatz besteht darin, die Daten im zu transformieren Regler. Dadurch können Sie die ursprüngliche Datenstruktur beibehalten und gleichzeitig ein neues Array mit Chunked-Daten erstellen. Sie können eine Funktion wie die folgende verwenden:

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

In Ihrer Ansicht iterieren Sie über die aufgeteilten Daten:

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

Filter in der Ansicht (nicht für Eingaben empfohlen)

Obwohl es möglich ist, einen Filter zum Anzeigen von Datenblöcken zu verwenden, ist es wichtig zu beachten, dass diese Methode nicht für die Verwendung mit Eingaben geeignet ist. Verlassen Sie sich stattdessen auf die Datentransformation im Controller.

Vertikale Spalten

Für vertikale Spaltenlayouts können Sie das CSS ändern oder benutzerdefinierte Funktionen verwenden, um die Elemente anzuordnen:

CSS-Spalten (bevorzugt)

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

Benutzerdefinierte Funktion

Alternativ können Sie ungleiche Listen vertikal verteilen Verwenden einer benutzerdefinierten Funktion:

<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;
}</code>

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