모서리 1.x를 사용한 재귀 또는 복잡한 템플릿

Question

이 질문 세트를 반복하고 각도로 템플릿을 작성할 수 있어야하는 데이터 구조 (아래 샘플 제공)가 있습니다. 각각 「질문」이 구성 가지고

{ 
    id: 2, // unique id 
    label: 'some label', // any label 
    type: 'input', // the type of html element 
    options: [], // other questions are nested in here (recursive) 
    children: [] // other questions are nested in here (recursive) 
} 

상술 한 바와 같이이, 타입 HTML 요소의 유형 및 options 및 children 차이를 설명 options 렌더링 questions 세트가 동일한 라인의 표시는 것이다 부모 질문의 경우 questions이 children 인 경우 한 줄 아래에 약간의 여백이 표시됩니다.

기본적인 내용이 ng-repeat인데 충분하지 않다는 것을 알고 있습니다. (이해할 때부터) 여기에 충분하지 않습니다. 그리고 이런 종류의 데이터를 템플릿 화하는 방법에 대해 궁금합니다. 구조.

미리 도움을 청합니다.

[ 
    { 
     id: 1, 
     label: 'something', 
     type: 'text', 
     options: [ 
      { 
       id: 2, 
       label: 'another', 
       type: 'text', 
       options: [], 
       children: [] 
      } 
     ], 
     children: [ 
      { 
       id: 83, 
       label: 'cool', 
       type: 'input', 
       options: [], 
       children: [] 
      }, 
      { 
       id: 121, 
       label: 'another cool thing', 
       type: 'label', 
       options: [ 
        { 
         id: 451, 
         label: 'only a label', 
         type: '', 
         options: [], 
         children: [ 
          { 
           id: 901, 
           label: 'a cool info', 
           type: 'label', 
           options: [], 
           children: [] 
          } 
         ] 
        } 
       ], 
       children: [] 
      } 
     ] 
    }, 
    { 
     id: 27, 
     label: 'some text', 
     type: 'label', 
     options: [ 
      { 
       id: 541, 
       label: 'hey there', 
       type: 'label', 
       options: [], 
       children: [] 
      } 
     ], 
     children: [ 
      { 
       id: 761, 
       label: 'hi there', 
       type: 'checkbox', 
       options: [], 
       children: [] 
      }, 
      { 
       id: 165, 
       label: 'cool', 
       type: 'text', 
       options: [ 
        { 
         id: 1090, 
         label: 'neat', 
         type: 'input', 
         options: [], 
         children: [ 
          { 
           id: 9891, 
           label: 'tell me', 
           type: 'textarea', 
           options: [], 
           children: [] 
          } 
         ] 
        } 
       ], 
       children: [] 
      } 
     ] 
    } 
]; 

Answer 1

내가 사용하는 것이 좋습니다 것 NG-경우 즉시 외부 HTML 템플릿을 대신 겨-클래스를 호출 할 수 있도록 :

여기에 샘플 데이터 구조입니다. 옵션이나 자식이 존재할 경우 다른 ng-repeat 내부에 포함되도록 템플릿을 조정할 수 있으므로 배열/객체의 끝까지 반복 할 수 있습니다.