Question

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

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

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

我希望我的angularJS应用程序将其显示为一组嵌套的<ul>，如下所示：

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

我不关心空白。我真正关心的是它看起来像是嵌套的子弹点。

我还创建了以下递归函数，将JSON转换为正确的HTML：

self.HTMLTree = function(jsonTree) {
  var retStr = '<li>' + jsonTree.node.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 retStr
}

在我的HTML中，我称之为：

{{myCtrl.HTMLTree(myCtrl.myTree)}}

当我加载此页面时，我看到HTMLTree()返回的整个HTML呈现为文本，而不是看到项目符号。为什么？如何让它渲染实际的子弹？

构建HTML树的方法是正确的吗？感觉不对。我觉得我应该能够以某种方式将它纯粹放在角度视图文件中而不将HTML编码到我的Javascript中。

以下是JSFiddle

Answer 1

尝试这种方式并找到示例代码here。

<强> HTML：

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

<强> JS：

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);
    }
});

如何使用AngularJS将JSON树显示为嵌套<ul>？

1 个答案: