Добавление элементов многорядных к столу с директивой

Question

Это моя модель:

$scope.orders = [ 
    { 
     id: 234324, 
     created: '2015-05-01T13:53:25.366Z', 
     orderedBy: 'John Smith', 
     items: [ 
     { 
      itemNumber: '225-3', 
      count: 3, 
      state: 'Sent' 
     }, 
     { 
      itemNumber: '3423-1', 
      count: 1, 
      state: 'Waiting from supplier' 
     } 
     ] 
    }, 
    { 
     id: 423423, 
     created: '2015-06-01T13:53:25.366Z', 
     orderedBy: 'Eva Andersson', 
     items: [ 
     { 
      itemNumber: '423-3', 
      count: 1, 
      state: 'Sent' 
     }, 
     { 
      itemNumber: '234-3', 
      count: 3, 
      state: 'Sent' 
     } 
     ] 
    } 
    ] 

Его список с заказами, где каждый заказ имеет массив элементы.

Я хочу показать это в таблице.

Я пытался сделать гнездо ng-repeats, но это оказалось трудно со статическим HTML синтаксиса таблицы. Мне кажется, что я должен вручную добавить подэлементы. Я не совсем уверен, как это сделать.

JsFiddle: http://jsfiddle.net/hadey1cf/4/

Любые идеи?

Answer 1

Вы можете иметь несколько tbody так легко сделать:

JSFiddle

<tbody ng-repeat="order in orders"> 
    <tr class="active"> 
     <td><b>{{order.id}}</b></td> 
     <td><b>{{order.orderedBy}}</b></td> 
     <td>{{order.created | date:'yyyy-MM-dd'}}</td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr ng-repeat="item in order.items"> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>{{item.itemNumber}}</td> 
     <td>{{item.count}}</td> 
     <td><span class="label label-success label">{{item.state}}</span></td> 
    </tr> 
    </tbody> 

Answer 2

Почему вы не используете вложенные повторы? Сделайте свой первый повтор на TBODY и внутри него повторяют через строки для элементов:

http://jsfiddle.net/mcgraphix/kfnvLts0/1/

<table class="table"> 
<thead> 
    <tr> 
    <th>Order Id</th> 
    <th>Orderd By</th> 
    <th>Created</th> 
    <th>Item id</th> 
    <th>Count</th> 
    <th>State</th> 
    </tr> 
</thead> 

<tbody ng-repeat="order in orders"> 
    <tr class="active"> 
    <td><b>{{order.id}}</b></td> 
    <td><b>{{order.orderedBy}}</b></td> 
    <td>{{order.date | date:'yyyy-MM-dd'}}</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr ng-repeat="item in order.items"> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>{{item.itemNumber}}</td> 
    <td>{{item.count}}</td> 
    <td><span class="label label-success label">{{item.state}}</span></td> 
    </tr> 
</tbody> 
</table> 

Answer 3

Альтернативный подход, если вы по какой-то причине не хотите, чтобы в вашей таблице было больше одного человека, чтобы использовать ng-repeat-start a й нг-повтор конца директивы, как показано здесь:

<table class="table"> 
<thead> 
    <tr> 
    <th>Order Id</th> 
    <th>Orderd By</th> 
    <th>Created</th> 
    <th>Item id</th> 
    <th>Count</th> 
    <th>State</th> 
    </tr> 
</thead> 

<tbody> 
    <!-- repeat will start with this but won't end with the closing tr tag 
    Instead it will end at the ng-repeat-end directives closing tag. see below--> 
    <tr class="active" ng-repeat-start="order in orders"> 
    <td><b>{{order.id}}</b></td> 
    <td><b>{{order.orderedBy}}</b></td> 
    <td>{{order.date | date:'yyyy-MM-dd'}}</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr ng-repeat="item in order.items"> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>{{item.itemNumber}}</td> 
    <td>{{item.count}}</td> 
    <td><span class="label label-success label">{{item.state}}</span></td> 
    </tr> 
    <!-- the outer repeat will end when this tag is closed. I'm seeting "display:none" so that it doesn't show a gap in your table --> 
    <tr ng-repeat-end><td colspan="6" style="display:none"></td></tr> 
</tbody> 
</table> 

Я думаю, что мой первый ответ это лучший способ пойти, хотя, так как логически у вас есть группы контента в таблице, которая является то, что TBODY для. Это действительно HTML, чтобы иметь больше, чем один, как HTML DTD гласит:

<!ELEMENT table 
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))> 

Однако, это хорошо, чтобы понять, как нг-повторить пуск и нг-повторить конец работы, поскольку есть много случаев, когда это Полезно.

Answer 4

Вы можете использовать директивы ng-repeat-start и ng-repeat-end.

Вы можете найти более подробную информацию об этом here

Пожалуйста см работает example

<script type="text/ng-template" id="orders.tmpl.html"> 
    <h2 class="page-header">Orders-directive</h2> 

    <table class="table"> 
    <thead> 
     <tr> 
     <th>Order Id</th> 
     <th>Orderd By</th> 
     <th>Created</th> 
     <th>Item id</th> 
     <th>Count</th> 
     <th>State</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="active" ng-repeat-start="order in orders"> 
     <td><b>{{order.id}}</b></td> 
     <td><b>{{order.orderedBy}}</b></td> 
     <td>{{order.date | date:'yyyy-MM-dd'}}</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr ng-repeat-end="" ng-repeat="item in order.items"> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>{{ item.itemNumber }}</td> 
     <td>{{ item.count }}</td> 
     <td><span class="label" data-ng-class="{'label-success':item.state=='Sent', 'label-primary':item.state=='Waiting from supplier'}">{{ item.state }}</span></td> 
     </tr> 
    </tbody> 
    {{content}} 
</script>