简体   繁体   中英

AngularJS ng-repeat display nested array in table

I want to display nested array in table. Array structure:

0: 
    value1:"something",
    ...
    firstNestedArray:{
        value2:"something2",
         ...
         secondNestedArray:{
             value3:"something3",
             ...
             thirdNestedArray:{
                 value4:"something4",
                 ...
             }
         }
    }    

Problem is that I don't know how to correctly process this array to display it in table.

I tried this:

<tbody data-ng-repeat="item1 in firstNestedArray">
    <tr data-ng-repeat="item2 in item1.secondNestedArray">
        <td>{{item1.value1}}</td>
        <td>
            {{item2.value2)}}
            <br>
            {{item2.value3)}}
        </td>
<!--    Problem appears here:    -->
        <td>
            {{thirdNestedArray.value1}}
        </td>
    </tr>
</tbody>

How can i display all this thirdNestedArray values that I need? Because all this values from array have to be displayed in one row.

|column1|column2|column3|column4|column5|
|value1 |value2 |value3 |value4 |value5 |

I've tried to do it like this bu this doesn't work:

<tbody data-ng-repeat="item1 in firstNestedArray">
    <tr data-ng-repeat="item2 in item1.secondNestedArray">
        <td>{{item1.value1}}</td>
        <td>
            {{item2.value2)}}
            <br>
            {{item2.value3)}}
        </td>

<!--               Does not work:    -->
        <div data-ng-repeat="item2 in item1.thirdNestedArray">
            <td>
                {{item2.value4}
            </td>
        </div>
    </tr>
</tbody>

First of all, you can't put a div in the middle of a table like that, Angular or not. Tables have a very specific parent-child tree.

Second, just use ng-repeat on the TD element you want to repeat. You'll have to track what the maximum number of TDs in ANY of the TRs is so that you can compensate in all of the other TRs (which may be shorter). I think the easiest way to do this is to check the source arrays' lengths in the controller, and push empty elements onto the ends of the shorter arrays that you're building from so that they all match the maximum size. This padding means you won't have to deal with more complex markup manipulations.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM