我已经做了一些研究,我似乎找不到最好的模式来递归地使用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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
