AngularJS Multiple ng-repeats on single row of table - Extended

Question

This is the extended question of AngularJS Multiple ng-repeats on single row of table

I'm trying to display a grandChilds collection. A for loop would look something like this.

foreach(var parent in list)
  foreach (var child in parent)
    foreach (var grandChild in child)
     print(grandChild.item1)
     print(grandChild.item2)
     print(grandChild.item3)

Below is the general idea of what each row would look like.

<table>
<tr ng-repeat="parent in list">
   ng-repeat="child in parent"
     ng-repeat="grandChild in child"
        <td>grandChild.item1</td>
        <td>grandChild.item2</td>
        <td>grandChild.item3</td>
</tr>
</table>

In the above referred question, TBODY is a good idea. But it will satisfy only two level (i.e., Parent and Child). How could I achieve my requirement (Parent, Child, Grandchild). Kindly assist me.

If I use nested TBODY, then its failed in the W3C Validation.

Kindly assist me how to achieve this

please mention data sample in question – NIKHIL RANE Sep 20 '17 at 12:01 — NIKHIL RANE, Sep 20 '17 at 12:01
@NIKHILRANE sure... Kindly wait I will update it. – Sep 20 '17 at 12:02 — , Sep 20 '17 at 12:02

score 0 · Answer 1 · answered Sep 20 '17 at 12:04

0

Use new table for each parent.

<table ng-repeat="parent in list">
<tbody>
    <tr ng-repeat="child in parent">
        <td ng-repeat="grandchild in child"></td>
    </tr>
</tbody></table>

answered Sep 20 '17 at 12:04

Lalnuntluanga Chhakchhuak

658
7
10

Grandchild is a collection of object. – Sep 20 '17 at 12:09
Angular will still loop through each object keys. Else you can use what you already did. grandChild.item1 grandChild.item2 grandChild.item3 – Lalnuntluanga Chhakchhuak Sep 20 '17 at 12:12
I know, how to organize the html table structure based on W3C ? – Sep 20 '17 at 12:13

Shaan · Answer 2 · 2017-09-20T12:59:01.137

0

You could show a table(or other elements such as span\div) for grandchild collection within the table for list

<table>
<tr ng-repeat="parent in list">
    <td ng-repeat="child in parent">
        <table>
            <tr ng-repeat="grandChild in child">
              <td ng-repeat="item in grandChild">
                {{item}}
              <td>
             </tr>
        </table>
    </td>
</tr></table>

EDIT: I have replaced it with div element. You can work on how to order the data in the display.

<table>
<tr ng-repeat="parent in list">
    <td ng-repeat="child in parent">
        <div ng-repeat="grandChild in child">
            <div ng-repeat="item in grandChild">
                {{item}}
            </div>
        </div>          
    </td>
</tr></table>

edited Sep 20 '17 at 12:59

answered Sep 20 '17 at 12:21

Shaan

10,746
1
20
16

Is there is any other way to avoid nested Table ? I will wait for some time, so no answer is posted, then I will mark your answer. – Sep 20 '17 at 12:54
I have updated my answer. You can also use ul (https://www.w3schools.com/tags/tag_ul.asp) – Shaan Sep 20 '17 at 13:01

AngularJS Multiple ng-repeats on single row of table - Extended

2 Answers2