Javascript 如何将JSON树显示为嵌套<；ul>；安格拉斯怎么样？_Javascript_Angularjs_Json

Javascript 如何将JSON树显示为嵌套<；ul>；安格拉斯怎么样？

javascript angularjs json

Javascript 如何将JSON树显示为嵌套<；ul>；安格拉斯怎么样？,javascript,angularjs,json,Javascript,Angularjs,Json,假设我有一个JSON树结构，如下所示： var myTree = { "node": { "name": "A", }, "children": [ { "node": { "name": "B", }, "children": [] }, { "node": { "name": "C", }, "children": [] } ] }

假设我有一个JSON树结构，如下所示：

var myTree = {
  "node": {
    "name": "A",
  },
  "children": [
    {
      "node": {
        "name": "B",
      },
      "children": []
    },
    {
      "node": {
        "name": "C",
      },
      "children": []
    }
  ]
}

<ul>
  <li>A
    <ul>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
</ul>

这只是一个显示树结构的示例。但实际上，这棵树可能要大得多，并且具有任意（未知）的深度

我希望我的angularJS应用程序将其显示为一组嵌套的

s，如下所示：

var myTree = {
  "node": {
    "name": "A",
  },
  "children": [
    {
      "node": {
        "name": "B",
      },
      "children": []
    },
    {
      "node": {
        "name": "C",
      },
      "children": []
    }
  ]
}

<ul>
  <li>A
    <ul>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
</ul>

加载此页面时，我看到的不是项目符号，而是由

HTMLTree（）

返回的整个HTML呈现为文本。为什么？如何使其渲染实际的项目符号

我构建HTML树的方法正确吗？感觉不对。我觉得我应该能够完全在角度视图文件中实现它，而无需将HTML编码到Javascript中

下面是

用这种方法尝试并找到示例代码

HTML:

<body ng-app="myApp">
    Hello World!
    <div ng-controller="MyController as myCtrl">
        <ul ng-bind-html="myCtrl.HTMLTree(myCtrl.myTree)"></ul>
    </div>
</body>

myApp = angular.module('myApp', []);


myApp.controller('MyController', function ($scope, $sce) {
    var self = this;

    self.myTree = {
        "category": {
            "name": "A",
        },
        "children": [{
            "category": {
                "name": "B",
            },
            "children": []
        }, {
            "category": {
                "name": "C",
            },
            "children": []
        }]
    }

    self.HTMLTree = function (jsonTree) {
        var retStr = '<li>' + jsonTree.category.name;
        if (('children' in jsonTree) && (jsonTree.children.length > 0)) {
            retStr += '<ul>';
            for (childIndex = 0; childIndex <= jsonTree.children.length - 1; childIndex++)
                retStr += self.HTMLTree(jsonTree.children[childIndex]);
            retStr += '</ul>';
        }
        retStr += '</li>';
        return $sce.trustAsHtml(retStr);
    }
});


你好，世界！

JS:

<body ng-app="myApp">
    Hello World!
    <div ng-controller="MyController as myCtrl">
        <ul ng-bind-html="myCtrl.HTMLTree(myCtrl.myTree)"></ul>
    </div>
</body>

myApp = angular.module('myApp', []);


myApp.controller('MyController', function ($scope, $sce) {
    var self = this;

    self.myTree = {
        "category": {
            "name": "A",
        },
        "children": [{
            "category": {
                "name": "B",
            },
            "children": []
        }, {
            "category": {
                "name": "C",
            },
            "children": []
        }]
    }

    self.HTMLTree = function (jsonTree) {
        var retStr = '<li>' + jsonTree.category.name;
        if (('children' in jsonTree) && (jsonTree.children.length > 0)) {
            retStr += '<ul>';
            for (childIndex = 0; childIndex <= jsonTree.children.length - 1; childIndex++)
                retStr += self.HTMLTree(jsonTree.children[childIndex]);
            retStr += '</ul>';
        }
        retStr += '</li>';
        return $sce.trustAsHtml(retStr);
    }
});

myApp=angular.module（'myApp'，[]）；
myApp.controller（'MyController'，函数（$scope，$sce）{
var self=这个；
self.myTree={
“类别”：{
“姓名”：“A”，
},
“儿童”：[{
“类别”：{
“名称”：“B”，
},
“儿童”：[]
}, {
“类别”：{
“姓名”：“C”，
},
“儿童”：[]
}]
}
self.HTMLTree=函数（jsonTree）{
var retStr=''+jsonTree.category.name；
if（（“子项”在jsonTree中）（&&（jsonTree.Childrent.length>0））{
retStr+=“”；
对于（childIndex=0；childIndex Usereturn$sce.trustAsHtml（retStr）
。还记得将$sce注入控制器中。理想情况下，您可以为此使用一个指令，更多信息请参见此。嗯，@ThomasGhesquiere，我在这里尝试过，但似乎不起作用：请参见Shashank的答案，
是丢失的键。（您的小提琴也丢失了返回语句）。