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

发布时间：2020-12-17 17:40:48 所属栏目：安全来源：网络整理

导读：我已经做了一些研究,我似乎找不到最好的模式来递归地使用ng-repeat来创建一个深表.有一些值得注意的提及用户mgdelmonte here关于这个主题,但唉,没有解决方案. HTML和模板： body ng-app="myApp" div ng-controller="myAppController"script type="text/ng-te

我已经做了一些研究,我似乎找不到最好的模式来递归地使用ng-repeat来创建一个深表.有一些值得注意的提及用户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>上运行时,它会为那些trs和tds创建一个单独的范围,我认为这是非法的(因为它们必须绑定到表元素).

将div更改为表或tbody或tr也是无操作(不是我甚至想要像这样嵌套表).

解决方法

浏览器不喜欢行之间的多个tbodys和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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!