角度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の内側に少し余白を残して1行下にレンダリングされます。

基本的な数字は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

あなたはその場で外部のHTMLテンプレートを呼び出すことができますので、私はNG-IFの代わりにNG-クラスを使用してお勧めしたいです。オプションや子が存在する場合、そのテンプレートを調整して別のng-repeatの中に入れることができるので、配列の深さに関係なく配列の終わりまでループすることができます。