Question

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

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>

如何显示我需要的所有thirdNestedArray值？因为数组中的所有这些值都必须显示在一行中。

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

我试图这样做但这不起作用：

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

Answer 1

首先，你不能把div放在像这样的表格的中间，不管是Angular。表有一个非常特定的父子树。

其次，只需在要重复的TD元素上使用ng-repeat。您必须跟踪任何TR中的最大TD数，以便您可以补偿所有其他TR（可能更短）。我认为最简单的方法是检查控制器中源数组的长度，并将空元素推送到您正在构建的较短数组的末端，以便它们都匹配最大大小。这种填充意味着您不必处理更复杂的标记操作。

AngularJS ng-repeat在表中显示嵌套数组

1 个答案: