Der zuverlässigste und technisch korrekteste Ansatz besteht darin, die Daten in der Steuerung zu transformieren. Hier ist eine einfache Chunk-Funktion und Verwendung.
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);
Dann würde Ihre Ansicht folgendermaßen aussehen:
<div class="row" ng-repeat="rows in chunkedData">
<div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>
Wenn Sie Eingaben innerhalb von haben ng-repeat, möchten Sie wahrscheinlich die Arrays aufheben / wieder verbinden, wenn die Daten geändert werden oder wenn sie gesendet werden. So würde dies in a aussehen $watch, sodass die Daten immer im ursprünglichen, zusammengeführten Format verfügbar sind:
$scope.$watch('chunkedData', function(val) {
$scope.data = [].concat.apply([], val);
}, true); // deep watch
Viele Menschen bevorzugen es, dies in der Ansicht mit einem Filter zu erreichen. Dies ist möglich, sollte aber nur zu Anzeigezwecken verwendet werden! Wenn Sie Eingaben in dieser gefilterten Ansicht hinzufügen, wird es Probleme verursachen, kann gelöst werden, aber sind nicht hübsch oder zuverlässig .
Das Problem mit diesem Filter ist, dass er jedes Mal neue verschachtelte Arrays zurückgibt. Angular beobachtet den Rückgabewert vom Filter. Wenn der Filter zum ersten Mal ausgeführt wird, kennt Angular den Wert und führt ihn dann erneut aus, um sicherzustellen, dass die Änderung abgeschlossen ist. Wenn beide Werte gleich sind, wird der Zyklus beendet. Wenn nicht, wird der Filter immer wieder ausgelöst, bis sie gleich sind, oder Angular erkennt, dass eine unendliche Digest-Schleife auftritt, und fährt herunter. Da neue verschachtelte Arrays / Objekte zuvor nicht von Angular verfolgt wurden, unterscheidet sich der Rückgabewert immer vom vorherigen. Um diese "instabilen" Filter zu beheben, müssen Sie den Filter in eine memoizeFunktion einschließen. lodashhat eine memoizeFunktion und die neueste Version von lodash enthält auch eine chunkFunktion, so dass wir diesen Filter sehr einfach mit erstellen könnennpmModule und Kompilieren des Skripts mit browserifyoder webpack.
Denken Sie daran: Nur anzeigen! Filtern Sie im Controller, wenn Sie Eingänge verwenden!
Installiere lodash:
npm install lodash-node
Erstellen Sie den Filter:
var chunk = require('lodash-node/modern/array/chunk');
var memoize = require('lodash-node/modern/function/memoize');
angular.module('myModule', [])
.filter('chunk', function() {
return memoize(chunk);
});
Und hier ist ein Beispiel mit diesem Filter:
<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>
Artikel vertikal bestellen
1 4
2 5
3 6
In Bezug auf vertikale Spalten (Liste von oben nach unten) und nicht horizontal (von links nach rechts) hängt die genaue Implementierung von der gewünschten Semantik ab. Listen, die sich ungleichmäßig aufteilen, können auf verschiedene Arten verteilt werden. Hier ist eine Möglichkeit:
<div ng-repeat="row in columns">
<div class="column" ng-repeat="item in row">
{{item}}
</div>
</div>
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;
}
Der direkteste und einfachste Weg, um Spalten abzurufen, ist die Verwendung von CSS-Spalten :
.columns {
columns: 3;
}
<div class="columns">
<div ng-repeat="item in ['a','b','c','d','e','f','g']">
{{item}}
</div>
</div>
