角度递归表行
角度递归表行
提问于 2015-04-22 17:43:38
我想从这个模型创建一个treeview表：
[
{Id: 1,
Type: Item
},
{Id: 2,
Type: Group,
Children[
{Id: 3,
Type: Item
},
{Id: 4,
Type: Item
},
{Id: 5,
Type: Group,
Children[
{Id: 6,
Type: Item
},
.... //there may be an infinite number of node
]
}]
},
{Id: x,
Type: Item
}但是我不知道如何使用指令和ng-repeat来做到这一点。
结果可能是这样的：
----------------------------------------------------
| Item 1 |
----------------------------------------------------
| Group 2 |
----------------------------------------------------
| Item 3 |
----------------------------------------------------
| Item 4 |
----------------------------------------------------
| Group 5 |
----------------------------------------------------
| Item 7 |
----------------------------------------------------
[...]
----------------------------------------------------
| Item x |
----------------------------------------------------我试图使用递归指令在我的表中嵌套多个tbody，但它不起作用。
有什么解决方案吗？
回答 3
Stack Overflow用户
发布于 2017-07-19 15:25:16
我试着用TABLE - TR做同样的事情，但没有成功。
- 尝试使用replace:true和类似
的模板编写属性指令(myTreeItem
<tr><td>{{item.Name}}</td></tr>
<tr my-tree-item item="item"></tr>
错误:在替换的情况下:true模板只能包含一个根元素
- 尝试使用
编写元素指令，如下所示：{{item.Name}}
浏览器发现tbody中有一些不是TR的东西，并将其抛出表标记:)
- 尝试使用"replaceWithChild“-使用div而不是TR的
- 我最后的希望是将指令作为注释，但无法传递多个字符串参数
最终得到了愚蠢的解决方案，没有递归。对于那些树深度有限并需要快速解决方案的人：plunker example
Stack Overflow用户
发布于 2015-11-08 18:11:09
您可以使用以下指令：
myApp.directive('replaceWithChild', function($timeout) {
return {
require: 'ngInclude',
restrict: 'A',
link: function(scope, el, attrs) {
$timeout(function() {
el.replaceWith(el.children());
});
}
};
});
注意：$timeout对于等待所有元素都准备就绪非常重要。
这里以Plunker为例
Stack Overflow用户
发布于 2020-02-07 18:00:24
晚做总比不做强。我能够使用Fabrice的答案来处理这个问题，如下所示。然而，我最终没有使用它，因为它在大量行/列的情况下表现不佳。因此，我使用了一个扁平化的列表和一个普通的ng-repeat。
angular
.module('app')
.directive('recursive-row', RecursiveRow);
RecursiveRow.$inject = ['$timeout'];
function RecursiveRow($timeout)
{
return {
restrict: 'A',
templateUrl: 'templates/recursive-row.html',
scope: {
model: '=',
},
link: function (scope, el, attrs)
{
$timeout(function ()
{
el.replaceWith(el.children());
});
}
};
} <script type="text/ng-template" id="templates/recursive-row.html">
<tr>
<td>{{model.heading}}</td>
<td>{{model.detail}}</td>
</tr>
<tr recursive-row
ng-repeat="child in model.children track by child.id"
model="child"></tr>
</script> <table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr recursive-row
ng-repeat="model in hierarchy track by model.id"
model="model">
</tr>
</tbody>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29793589
复制相关文章
相似问题
腾讯云开发者
