首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有没有可能用Angular制作一个树状视图?

有没有可能用Angular制作一个树状视图?
EN

Stack Overflow用户
提问于 2012-08-08 05:38:36
回答 11查看 207.7K关注 0票数 178

我希望在web应用程序中以树结构显示数据。我希望使用Angular来完成这项任务。

看起来ng-repeat将允许我遍历节点列表,但是当给定节点的深度增加时,我如何进行嵌套呢?

我尝试了following code,但它的自动转义阻止了它的工作。另外,结束ul标签放在错误的位置。

我很确定我处理这个问题的方式完全错了。

有什么想法吗?

EN

回答 11

Stack Overflow用户

回答已采纳

发布于 2012-08-08 16:56:16

看看这把小提琴

原创:http://jsfiddle.net/brendanowen/uXbn6/8/

更新:http://jsfiddle.net/animaxf/uXbn6/4779/

这应该会让你对如何使用angular显示tree like structure有一个很好的了解。这有点像在html中使用递归!

票数 236
EN

Stack Overflow用户

发布于 2014-05-06 23:46:30

angular-ui-tree似乎为我做了一件好事

票数 17
EN

Stack Overflow用户

发布于 2013-05-28 05:28:44

下面是一个使用递归指令的示例:取自https://groups.google.com/forum/#!topic/angular/vswXTes_FtMhttp://jsfiddle.net/n8dPm/

代码语言:javascript
复制
module.directive("tree", function($compile) {
return {
    restrict: "E",
    scope: {family: '='},
    template: 
        '<p>{{ family.name }}</p>'+
        '<ul>' + 
            '<li ng-repeat="child in family.children">' + 
                '<tree family="child"></tree>' +
            '</li>' +
        '</ul>',
    compile: function(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var compiledContents;
        return function(scope, iElement, iAttr) {
            if(!compiledContents) {
                compiledContents = $compile(contents);
            }
            compiledContents(scope, function(clone, scope) {
                     iElement.append(clone); 
            });
        };
    }
};
});
票数 15
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11854514

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档