AngularJS ng-repeat tbody dupliziert.

Question

Ich versuche, die folgende Tabellenstruktur (Beispiel 1) mit AngularJS und ng-repeat zu erstellen. Die einzige Anforderung, die ich habe, ist, dass das tbody nicht wiederholt wird. Die Daten, mit denen ich arbeite, haben die Struktur product.productunit. Die linke Zelle der Tabelle, die ein rowspan=3 hat, zeigt ein Bild an und die folgenden 3 Zellen zeigen die Produkt-Einheiten dieses Bildes an. Die gesamte Tabelle wird dann in ein festes scrollbares Raster mit festen Kopf-/Fußzeilen mittels CSS platziert: tbody {overflow-y: scroll}. Leider zerbricht das Scrollen, wenn zwischen jedem Produkt mehrere tbodys vorhanden sind, wie in (Beispiel 2) gezeigt, das nicht funktioniert.

UPDATE

Meine Frage ist, wie man das ng-repeat innerhalb des tbody entfernen kann. Die Leute unten haben meine Frage abgewertet, weil mein Beispiel das ng-repeat zusammen mit tbody zeigt. Ich frage, wie ich meinen Code umschreiben kann, um das HTML korrekt zu rendern, wie in (Beispiel 1). Das Endergebnis sollte es mir ermöglichen, eine Tabelle wie im folgenden Fiddle-Beispiel-Link zu haben.

jsfiddle.net/TroyAlford/SNKfd

Beispiel 1

    Einheit 1

    Einheit 2

    Einheit 3

    Einheit 1

    Einheit 2

    Einheit 3

Dies ist das AngularJS, das an meine verschachtelten Produkte und Einheiten gebunden ist. Ich bin auch auf ng-repeat-start und ng-repeat-end aufmerksam, die meiner Meinung nach bisher nicht funktionieren werden?

Zweitens muss das folgende Beispiel eine TR für jedes Produkt wiederholen, mit verschachtelten TDs für jede Einheit.

Beispiel 2

                Produkt
                Einheit

               Einheit: {{resProductUnit.Title}}

Answer 1

ng-repeat wiederholt das Element, auf dem es deklariert ist. Versuchen Sie, Ihre ng-repeat's in die 's und 's zu verschieben. Wenn Sie eine separate Tabelle für jedes Produkt möchten, platzieren Sie das äußere ng-repeat auf dem`

Element.`