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

Question

查看树折叠和展开模式

使用的标记是HTML表格。

使用ng-repeat变得棘手。

每行的数据如下

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

使用ul和li标记，我们可以使用ng-include实现此目的。

但现有的应用程序标记使用表格。我开始考虑更改标记以使用ul，li和div是“唯一”的方法。我在这里错过了什么吗？任何指针/方法？

Answer 1

您可以尝试以下内容：

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

我怀疑你能搞清楚。不要忘记展示最后的作品。

这是一个掠夺者：http://plnkr.co/edit/ENXYcu?p=preview

Answer 2

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

GitHub link

Working example on JSFiddle

它是如何工作的？

我使用简单的概念来实现这个表，只需将复杂的树数据结构更改为简单的一维数组，并使用有角度的重复数据重复此数组。此数组中的每个节点都包含父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：它将有助于显示哪个节点必须显示在哪个节点下。