Angles Js로 n 레이어 중첩 json 객체를 표시하는 방법은 무엇입니까?

Question

ul 및 li을 사용하는 메뉴가 있습니다. Angular 및 JSON 객체로 표시하고 싶습니다.

ng-repeat으로 시도하지만 내 개체에 20 개의 레이어 중첩 개체가 있거나 다른 레이어에 중첩 된 자식 레이어가있는 경우 내 문제는 무엇입니까?

이

HTML

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

코드 내 JSON 객체는 다음과 같습니다

이

var model = [ 
    { text: "one", link: "#" }, 
    { text: "tow", link: "#" }, 
    { 
     text: "three", 
     link: "#", 
     children: [ 
      { text: "four", link: "#" }, 
      { text: "five", link: "#", children: [{text:"nine", link:"#"}] }, 
      { text: "six", link: "#" } 
     ] 
    }]; 

$scope.model = model; 

Answer 1

당신은 NG 바인드-HTML

과 함께보기에 결박 한 후 컨트롤러에 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>'; 
}); 

0 :

내가 재귀 접근 방식을 추천 할 것입니다

당신은 composite pattern의 원칙에 따라야한다

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

Answer 2

이 처리하는 좋은 방법으로보기에 호출 할 수 있습니다 : 다음과 같이 정의 된 복합 요소

<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> 
    ` 
} 

편집 : 엄격한 구현이 아니지만 그의 직업은