Верстка нг-повтор на одном уровне DOM

Question

Я вложенные коллекции, а именно:

[ 
    { 
    name: "foo", 
    members: ["foo1","foo2"] 
    }, { 
    name: "bar", 
    members: ["bar1","bar2","bar3"] 
    }, { 
    name: "qux", 
    members: [] 
    } 
] 

Исходя из этого, я хотел бы произвести следующую разметку:

<tbody> 
    <tr> 
    <th scope="row" rowspan="2">foo</th> 
    <td>foo1</td> 
    </tr><tr> 
    <td>foo2</td> 
    </tr><tr> 
    <th scope="row" rowspan="3">bar</th> 
    <td>bar1</td> 
    </tr><tr> 
    <td>bar2</td> 
    </tr><tr> 
    <td>bar3</td> 
    </tr> 
</tbody> 

Было бы также приемлемый для повторения <th> клеток в каждой строке, если rowspan оказывается слишком неудобно работать с:

<tbody> 
    <tr> 
    <th scope="row">foo</th> 
    <td>foo1</td> 
    </tr><tr> 
    <th scope="row">foo</th> 
    <td>foo2</td> 
    </tr><tr> 
    <th scope="row">bar</th> 
    <td>bar1</td> 
    </tr><tr> 
    <th scope="row">bar</th> 
    <td>bar2</td> 
    </tr><tr> 
    <th scope="row">bar</th> 
    <td>bar3</td> 
    </tr> 
</tbody> 

Что такое идиоматический способ выполнить такую ​​задачу, используя AngularJS? В частности, я изо всех сил пытаюсь понять, как можно вставить вложенныйng-repeat на одном уровне DOM (т. Е. На элемент <tr>).

Answer 1

Вы не можете добавить несколько повторов в один тег. Но вы можете добавить нг-повтора в tbody в таблицу

<table> 
    <tbody ng-repeat="row in data"> 
    <tr ng-repeat="member in row.members"> 
     <th scope="row" rowspan="{{row.members.length}}" ng-if="$first">{{row.name}}</th> 
     <td>{{member}}</td> 
    </tr> 
    </tbody> 
</table> 

Тогда вы можете скрыть дополнительные th «S с помощью ng-if и $first - это локальное свойство в ng-repeat, которая становится истинным на первый элемент в повторе.

Посмотрите на JSBin с результатом