Javascript AngularJS ng重复显示表中的嵌套数组

我想在表中显示嵌套数组。阵列结构：

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

问题是，我不知道如何正确处理这个数组以在表中显示它

我试过这个：

<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>

我试着这样做，但这不起作用：

<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>

{{item1.value1}
{{item2.value2}


{{item2.value3}
{{item2.value4}
首先，你不能把DIV放在表格中间，有角或没有。表有一个非常特殊的父子树。
第二，只需在要重复的TD元素上使用ng repeat。您必须跟踪任何TR中TDs的最大数量，以便在所有其他TR中进行补偿（可能更短）。我认为最简单的方法是在控制器中检查源数组的长度，并将空元素推到正在构建的较短数组的末端，以便它们都匹配最大大小。这种填充意味着您不必处理更复杂的标记操作。
您可以使用
标记进行分组您的行。无论如何，不要使用
div
，对要重复的
tr/td
应用
ngRepeat
指令
<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>