Erstellung einer neuen Tabellenzeile mit ng-repeat und <td>, wenn mod N Spalten

Question

Ich versuche ng-repeat zu verwenden, um zwei Spalten zu erstellen. Ich habe eine Liste von Elementen z.B. ['grün', 'rot', 'blau', 'gelb'] und möchte zwei Spalten mit jeweils zwei Elementen erstellen. Ich bin mir jedoch nicht sicher, wie ich eine neue Zeile beginnen kann, wenn der aktuelle Index mod 2 ist.

grün    rot
blau    gelb

Gibt es eine Möglichkeit, dies zu tun?

Answer 1

Ich würde einfach die Daten vorbereiten, bevor sie an das DOM übergeben werden. Sie finden viele Implementierungen von "Chunk" online

['grün', 'rot', 'blau', 'gelb']

in passende Abschnitte aufteilen:
[ [ "grün", "rot" ], [ "blau", "gelb" ] ]

code:

                {{ color }}

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.colors = ['grün', 'rot', 'blau', 'gelb'];
    $scope.tableData = chunk($scope.colors, 2);
}

function chunk (arr, len) {
  var chunks = [],
      i = 0,
      n = arr.length;
  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }
  return chunks;
}

Output

grün   rot
blau    gelb

http://jsfiddle.net/oyz0f07n/

Answer 2

Sie können es über css steuern

Wenn Sie Bootstrap verwenden

     {{ color }} 

Wenn Sie Bootstrap nicht verwenden, können Sie in Ihrem css eine Klasse mit 50% Breite festlegen und diese Klasse im div hinzufügen. Etwas wie das

CSS

.width-50 {
    width: 50%;
}

HTML

     {{ color }}