gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 18:41:35 24 4
gpt4 key购买 nike

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

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 创建一个单独的范围s 和 td s,我猜这是非法的(因为它们必须绑定(bind)到 table 元素)。

更改 divtabletbodytr也是无操作的(我什至不想像那样嵌套一个表)。

最佳答案

浏览器不喜欢多个 tbody s 和 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

关于angularjs - 使用 ng-repeat 和 ng-include 创建递归表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24903531/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com