Angular JS以树状格式呈现JSON

Question

如何像使用http://jsonviewer.stack.hu/那样以树状方式渲染JSON ？

Answer 1

您感兴趣的技术是“ 递归指令 ”。如果您尚不知道如何编写指令，则应首先开始学习它。Angular
JS官方文档在解释指令创建自定义指令方面做得更好

一旦知道如何编写自定义指令，就可以了解递归指令。我发现此Google网上论坛线程很有帮助：递归指令。尤其是，我发现该线程中的
Mark Lagendijk的Recursion Helper服务 非常有用。

确保在那里检查示例。与您相关的一些示例是：

plnkr
jsfiddle

在上面的jsfiddle示例中，请看一下：

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
        template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<p>{{ family.name }}</p>' + 
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child"></tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr, transclude) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

我上面提到的Mark Lagendijk的递归帮助器服务摘录了上面的某些代码。

最后，我实现了 angular-json-human
，它以嵌套表结构呈现JSON，这使得人类更容易阅读。您可以对其进行修改以适合您的需要。演示在这里，仓库在这里

希望这可以帮助！