Nested ng-repeat auf demselben Elemente ohne ursprüngliche Datenquelle Abflachen

Question

I ng-repeat bin mit Tabellenzeilen für das folgende Objekt

$scope.things = [{ 
    name: 'Bob', 
    otherThings: [{ 
     foo: 'hello' 
    },{ 
     foo: 'bye' 
    }] 
},{ 
    name: 'Sid', 
    otherThings: [{ 
     foo: 'cake' 
    },{ 
     foo: 'fish' 
    }] 
}]; 

Der ng-repeat Ausdruck, den ich mit gegangen zu erzeugen, ist:

<tbody ng-repeat="thing in things"> 
    <tr ng-repeat="otherThing in thing.otherThings"> 
     <td>{{thing.name}}</td> 
     <td>{{otherThing.foo}}</td> 
    </tr> 
</tbody> 

Dies erzeugt mehrere tbody Elemente, ein pro übergeordnetem Element in meinem Objekt:

<tbody> 
    <tr> 
     <td>Bob</td> 
     <td>hello</td> 
    </tr> 
    <tr> 
     <td>Bob</td> 
     <td>bye</td> 
    </tr> 
</tbody> 
<tbody> 
    <tr> 
     <td>Sid</td> 
     <td>cake</td> 
    </tr> 
    <tr> 
     <td>Sid</td> 
     <td>fish</td> 
    </tr> 
</tbody> 

ich mag Vermeiden Sie mehrere tbody-Elemente, aber ich weiß, um auf Eltern- und Kind-Elemente zugreifen zu können, muss ich die ng-Wiederholungen verschachteln.

Ich könnte das ursprüngliche Objekt abflachen, so dass die Elterninformationen für jedes Kind dupliziert werden, aber ich möchte dies möglichst vermeiden und die Datenstruktur wie sie ist verwenden.

Gibt es spezielle Verwendungen von ng-repeat, z. mehrere Ausdrücke, die bei einer ng-Wiederholung verwendet werden können, um in jeder Iteration sowohl auf die übergeordneten als auch auf die untergeordneten Elemente zuzugreifen?

Dank

UPDATE

Der Grund, warum ich mehrere tbody Elemente vermeiden wollen, weil ich eine CSS-Selektor für alternative Reihe Schattierung haben:

tbody tr:nth-child(odd){ 
    background-color: $theme-list-alt; 
    } 

Wenn jeder Elternteil hatte man nur Kind Artikel würden sie alle gleich gefärbt, während ich durchgehend alternierende Reihe Farben wollen.

Update 2

Ich fragte mich, ob mit ng-Repeat-Start- und ng-repeat-Ende mir hier helfen könnte, so habe ich versucht, mit dem folgenden Plunkr

dieses nicht geben Sie mir eine Zeile pro Kind, zB:

Bob hello 
Bob bye 
Sid cake 
Sid fish 

Ich kann sehen, warum, nur nicht sicher, wie ich das erreichen kann.

Answer 1

Versuchen Sie dies.

<tbody> 
    <tr ng-repeat="thing in things"> 
    <td>{{thing.name}}</td> 
    <td ng-repeat="otherThing in thing.otherThings">{{otherThing.foo}}</td> 
    </tr> 
</tbody>