Question

我已经做了一些研究，我似乎无法找到最佳模式，以递归方式使用ng-repeat来创建深table。用户mgdelmonte对该主题有一些值得注意的提及here，但唉，没有解决方案。

HTML和模板：

<body ng-app="myApp">
    <div ng-controller="myAppController">

<script type="text/ng-template"  id="tree_item.html">
    <tr style="width:100%">        
        <td>{{data.name}}</td>
    </tr>
    <div ng-repeat="data in data.nodes" ng-include="'tree_item.html'">

    </div>
</script>

<table class="table table-striped">
     <thead>
        <tr>
            <th style="width:30px;">Test</th>
        </tr>
    </thead>
    <tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">

    </tbody>
</table>
</div>
</body>

JS：

angular.module('myApp', []);

function myAppController($scope) {
    $scope.treeData = [{
        "name": "Root",
        "nodes": [{
            "name": "Level 1",
            "nodes": [{
                "name": "Level 2"
            }]
        }]
    }];
}

这是我的jsfiddle：http://jsfiddle.net/8f3rL/86/

这是我得到的绝对最远的。它可以很好地遍历树，但是当它递归时我丢失了<tr>个标签。相反，它正在渲染<span> s。

我的直觉告诉我，当ng-repeat在<div>上运行时，它会为那些tr和td创建一个单独的范围，我猜是非法的（因为它们必须绑定到table元素）。

将div更改为table或tbody或tr也是无操作的（不是我甚至想要像这样嵌套表格）。

Answer 1

浏览器不喜欢行之间的多个tbody和div标记。试试这个......

<body ng-app="myApp">
    <div ng-controller="myAppController">

<script type="text/ng-template"  id="tree_item.html">
    <td>{{data.name}}
        <table style="margin-left: 20px">
            <tr ng-repeat="data in data.nodes" ng-include="'tree_item.html'"></tr>
        </table>
    </td>
</script>

<table class="table table-striped">
     <thead>
        <tr>
            <th style="width:30px;">Test</th>
        </tr>
    </thead>
    <tbody>
        <tr style="width:100%" ng-repeat="data in treeData" ng-include="'tree_item.html'"></tr>
    </tbody>
</table>
</div>

Live Demo - Fiddle

使用ng-repeat和ng-include创建递归表

1 个答案: