Html 如何通过角Js显示n层嵌套json对象？

我有一个使用

ul

和

li

的菜单。我想通过Angular和JSON对象来显示它

我试图通过

ng repeat

来实现这一点，但我的问题是，如果我的对象有20层嵌套对象，或者另一方面，它有n层嵌套子对象，如何显示它

html代码

<ul>
  <li ng-repeat="item in model">
    {{item.text}}
  </li>
</ul>

---

您可以在控制器上创建html，然后使用ng bind html将其绑定到视图

我建议采用递归方法：

'use strict';

angular.module('yourApp')
.controller('FooCtrl', function($scope) {
    var myModel = [
        { text: "one", link: "#" },
        { text: "tow", link: "#" }, 
        {
            text: "three",
            link: "#",
            children: [
                { text: "four", link: "#" },
                { text: "five", link: "#", children: [{ text: "nine", link: "#" }] },
                { text: "six", link: "#" }
            ]
        }
    ];
    var createHtml = function(model) {
        var html = '';
        for(var i = 0 ; i < model.length ; i++) {
            var li = model[i];
            html += '<li>';
            html += li.text;
            if(li.children) {
                html += '<ul>';
                html += createHtml(li.children);
                html += '</ul>';
            };
            html += '</li>';
        }
        return html;
    }
    $scope.myHtml = '<ul>'+createHtml(myModel)+'</ul>';
});

“严格使用”；
angular.module（'yourApp'）
.controller（'FooCtrl'，函数（$scope）{
var myModel=[
{文本：“一”，链接：#“}，
{文本：“拖”，链接：#“}，
{
正文：“三”，
链接：“#”，
儿童：[
{文本：“四”，链接：#“}，
{文本：“五”，链接：“#”，儿童：[{文本：“九”，链接：“#”}，
{文本：“六”，链接：#“}
]
}
];
var createHtml=函数（模型）{
var html=''；
对于（变量i=0；i”；
html+=li.text；
如果（li.儿童）{
html+='
'；
html+=createHtml（li.children）；
html+='
'；
};
html+=''；
}
返回html；
}
$scope.myHtml='
'+createHtml（myModel）+'
'；
});

你可以在你的视野中用

<div ng-bind-html="myHtml">   
</div>

---

处理这一问题的好方法应遵循以下原则：

组合元素定义如下：

 const compositeList = {
    scope: {
        items: "="
    },
    restrict: 'E',
    template: `
        <ul>
            <li ng-repeat="item in vm.items">
                <a ng-href="{{item.link}}">{{item.text}}</a>
                <composite-list ng-if="item.children.length" items="item.children"> 
                </composite-list>
            </li>
        </ul>
    `
 }

const compositeList={
范围：{
项目：“=”
},
限制：'E'，
模板：`




`
}

---

编辑：不是一个严格的实现，但它完成了他的工作。

可能重复的@staddy\u答案是不正确的，因为它只支持两层

<composite-list items="model"> </composite-list>

 const compositeList = {
    scope: {
        items: "="
    },
    restrict: 'E',
    template: `
        <ul>
            <li ng-repeat="item in vm.items">
                <a ng-href="{{item.link}}">{{item.text}}</a>
                <composite-list ng-if="item.children.length" items="item.children"> 
                </composite-list>
            </li>
        </ul>
    `
 }