Heim  >  Artikel  >  Web-Frontend  >  Wie verteile ich ng-repeat-Daten mithilfe von Bootstrap in AngularJS in Spalten?

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

Susan Sarandon
Susan SarandonOriginal
2024-10-25 10:30:02328Durchsuche

How to distribute ng-repeat data into columns using Bootstrap in AngularJS?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn