ng-repeat 内的 ng-repeat 和每个项目的 td - AngularJS

Posted 2023-03-05

【中文标题】ng-repeat 内的 ng-repeat 和每个项目的 td - AngularJS

【英文标题】：ng-repeat inside ng-repeat with td for each item - AngularJS

【发布时间】：2015-06-19 17:49:29

【问题描述】：

此代码为我提供了一个表格，其中包含单列中的元素。

这里的数据会是这样的

var data = [["id":"1","value":"One","id":"2","value":"Two","id":"3","value":"three"],["id":"4","value":"four","id":"5","value":"five","id":"6","value":"six"],["id":"7","value":"seven","id":"8","value":"eigth","id":"9","value":"nine"]]

<div id="mydiv">
    <table>
       <tr ng-repeat="rows in data">
           <td ng-repeat="item in rows">item.id:item.value</td>
        </tr>
    </table>
</div>

这给了我一个三列的表格。喜欢

1:One 2:Two 3:three
4:four 5:five 6:six
7:seven . . .

除此之外，我希望表格在一列中包含item.id : 在一列中，item.value 在一列中以提高可读性，而不是在一列中。

尝试这样做但无法使其正常工作，有人可以帮助我吗？

【问题讨论】：

只是为了检查我的理解是否正确 - 每行有三个元素，对吧？

我已经用数据@dev-null 更新了我的问题

【参考方案1】：

你应该这样定义你的表：

<div id="mydiv">
    <table>
        <tr ng-repeat="rows in data">
            <td ng-repeat-start="item in rows">item.id</td>
            <td>:</td>
            <td ng-repeat-end>item.value</td>
        </tr>
    </table>
</div>

欲了解更多信息，请参阅Special repeat start and end points section of the ngRepeat documentation：

为了重复一系列元素而不仅仅是一个父元素，ngRepeat（以及其他 ng 指令）支持通过使用 ng-repeat-start 和 ng-repeat 定义显式起点和终点来扩展重复器的范围-分别结束。 ng-repeat-start 指令的工作方式与 ng-repeat 相同，但会重复所有 html 代码（包括定义它的标签），直至并包括放置 ng-repeat-end 的结束 HTML 标签。

【讨论】：

完美！谢谢你:)

您认为这个答案是您问题的正确答案吗？如果是，您能否将其标记为正确答案以帮助他人阅读您的问题？

如果某些行中没有项目怎么办？基本上，我有这张表，其中包含某些类别。有些有子类别，有些没有。我怎么能把代码放在我的 html 中？至于我循环进去的数组的结构是这样的： name : 'name_category', subcategories: 显然有些对象的子类别数组是空的