Question

我有一个AngularJS，JS，JQ，HTML5网络应用，可以向我们的项目发送不同的HTTP方法＆＃39; s RESTful Web Service并在JSON收到回复。

看起来像这样：

enter image description here

我想要的是创建一个AngularJS directive，它可以接受JSON对象并为它找到的每个JSON属性创建一个<li>。如果属性本身是一个对象 - 该函数应该递归调用。

基本上，我搜索了一种方法，以跟随JSON的方式将JSON对象解析为HTML元素：

{
    "title": "1",
    "version": "1",
    "prop" : {
         "a" : "10",
         "b" : "20",
         "obj" : {
              "nestedObj" : {
                   "c" : "30"
               } 
          }
     }
}

将被转换为以下html：

<ul>
    <li>title : 1</li>
    <li>version : 1</li>
    <li>
        prop : 
        <ul>
            <li>a: 10</li>
            <li>b: 20</li>
            <li>
                obj : 
                <ul>
                    <li>
                        nestedObj : 
                        <ul>
                            <li>c : 30</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

有没有人知道如何使用AngularJS指令实现这一目标？每个有用的答案都受到高度赞赏和评价。

谢谢。

Answer 1

我通过recursivly包含一个指令来尝试这个。但这似乎真的很难看。

我的解决方案就像用递归方法生成的普通旧html一样，并附加为元素：

//recursivly generate the object output
scope.printObject = function (obj, content) {
    content = "<ul>";
    for (var i in obj) {
       if (angular.isObject(obj[i])) {
           content += "<li>"+i+""+scope.printObject(obj[i])+"</li>";
       } else {
           content += "<li>" + i + ":" + obj[i] + "</li>";
       }
    }
    content+="</ul>";
    return content;
 };

这里有完整的工作代码：

http://jsfiddle.net/zh5Vf/1/

Answer 2

它与Angular（它的普通旧JS）几乎没有关系，但为了它的乐趣，这里有一个指令可以做你想要的：（为了正确格式化HTML代码（缩进）并支持自定义初始缩进，这有点冗长。）

app.directive('ulFromJson', function () {
    var indentationStep = '    ';

    function createUL(ulData, indentation) {
        indentation = indentation || '';

        var tmpl = ['', '<ul>'].join('\n' + indentation);
        for (var key in ulData) {
            tmpl += createLI(key, ulData[key], indentation + indentationStep);
        }
        tmpl = [tmpl, '</ul>'].join('\n' + indentation);

        return tmpl;
    }

    function createLI(key, value, indentation) {
        indentation = indentation || '';

        var tmpl = '';
        if (angular.isObject(value)) {
            var newIndentation = indentation + indentationStep;
            tmpl += '\n' + indentation + '<li>' +
                    '\n' + newIndentation + key + ' : ' +
                    createUL(value, newIndentation) +
                    '\n' + indentation + '</li>';
        } else {
            tmpl += '\n' + indentation + '<li>' + key + 
                    ' : ' + value + '</li>';
        }

        return tmpl;
    }

    return {
        restrict: 'A',
        scope: {
            data: '='
        },
        link: function postLink(scope, elem, attrs) {
            scope.$watch('data', function (newValue, oldValue) {
                if (newValue === oldValue) { return; }
                elem.html(createUL(scope.data));
            });

            elem.html(createUL(scope.data));
        }
    };
});

然后像这样使用它：

<div id="output" ul-from-json data="data"></div>

另请参阅此 short demo 。

AngularJS指令，用于将HTML元素附加到现有元素

2 个答案: