Angularjs 在Angular.js中使用HTML表格的嵌套/树视图

查看树折叠和展开模式：

使用的标记是HTML表

使用ng repeat变得越来越棘手

每行的数据如下所示

{  
    "id": 1,
    "name": "Groceries",
    "price": "0",
    "total": "20",
    "parentFlag": "true",
    "parentId": "",
    childItems: [{},{}]
}

使用

ul

和

li

标记，我们可以使用ng include实现这一点

---

但现有的应用程序标记使用表。我开始认为将标记改为使用

ul

，

li

和

div

是“唯一”的方法。我是不是遗漏了什么？有什么建议/方法吗？

您可以尝试以下方法：

<table class="table">
    <thead>
        <tr>
            <th>Package</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start='Package in Packages'>
            <!-- take a look to ng-repeat-start -->
            <td>
                <button ng-click="viewChilds= !viewChilds">+</button>{{Package.name}}</td>
            <td>{{Package.total}}</td>
        </tr>
        <tr>
            <!-- this is repeated for package-->
            <td colspan='2' ng-class="viewChilds? '' : 'hide'">
                <!-- viewChilds controls the collapse () -->
                <table class="subTable">
                    <!-- make some ident in subTable style -->
                    <tbody>
                        <tr ng-repeat='chilItem in Package.childItems'>
                            <!-- a nested repeat for each children -->
                            <td>{{chilItem.name}}</td>
                            <td>{{chilItem.price}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr ng-repeat-end></tr>
        <!-- this is repeated also (if you need) -->

    </tbody>
</table>

包裹
价格
+{{Package.name}
{{Package.total}
{{chilItem.name}
{{chilItem.price}

我想你能猜出来。别忘了展示最后的作品

---

下面是一个例子：

几个月前我遇到了同样的问题，我解决了它。这是一个使用Angular.js和bootstrap的树状视图表。查看其代码和流程以了解其工作原理。它有文档说明和工作示例

它是如何工作的？ 我使用简单的概念来实现这个表，只需将复杂的树数据结构更改为简单的一维数组，并使用angular的ng repeat来重复这个数组。此数组中的每个节点都包含父id和级别信息，用于在适当的位置显示每个节点并将其正确缩进。例如

var treeDS = [ { name : aptitude, id : 123, childNodes : [ { name :     time and work, id : 125 }, { name : problem on trains, id : 127 } ] } ]

将此树数据结构转换为以下一维数组

var oneDArray = [ { name : aptitude, id : 123, level : 0, indentClass : "indent-0", parentId : -1 }, { name : aptitude, id : 123, level : 0, indentClass : "indent-1" parentId : 123 }, { name : aptitude, id : 123, level : 0, indentClass : "indent-1", parentId : 123 } ]

此oneDArray包含所有信息，用于在具有适当父子关系和缩进的表中显示树数据结构

级别：它将显示节点深度 indentClass：它将根据节点深度缩进行

---

parentId：这将有助于显示哪个节点必须显示在哪个节点下。

您能提供一些代码和视图标记吗？最好在或上组合一个最小功能示例。如果没有更多的信息，你很难理解你的目标是什么，你当前的问题是什么。