Angular JS以树格式呈现JSON

Question

我如何在树中渲染JSON就像http://jsonviewer.stack.hu/使用角度JS一样？

Answer 1

我已经制作了这个Angular指令,用于以一种很好的方式呈现JSON.它可以在凉亭中使用:

https://github.com/mohsen1/json-formatter

Answer 2

您感兴趣的技术是" 递归指令 ".如果您还不知道如何编写指令,那么您应该先开始学习它.Angular JS官方文档在解释创建自定义指令的指令方面做得更好

一旦知道如何编写自定义指令,就可以了解递归指令.我发现这个Google Groups主题很有用:递归指令.特别是,我发现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的Recursion Helper服务抽象出来.

最后,我实现了angular-json-human,它在嵌套的表结构中呈现JSON,这使得人类更容易阅读.您可以根据需要进行修改.演示在这里,回购在这里

希望这可以帮助!