使用Angular 1.x遞歸或複製模板

我有一個數據結構（下面提供的示例），我需要對這組問題進行迭代，並能夠對它們進行角度模板化。每個「問題」具有這種結構：使用Angular 1.x遞歸或複製模板

{ 
    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都在同一行顯示作爲父問題，而children內部的questions在下方呈現爲一行，並帶有一點左邊距。

我不熟悉不夠用角上你會如何實現這一目標，考慮到基本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: [] 
      } 
     ] 
    } 
];

來源

2017-02-16 Detuned

你需要使用嵌套的ng-repeats並應用ng-class，這取決於你正在循環的項目的種類，使選項和子項目看起來應用css類不同。 –

是的，這是我原來的，但它不能解決以下問題： --------- 1）嵌套ng-repeats只有你寫的許多級別。因此，爲什麼我想知道是否有其他方式來做這件事情？ - 2）ng-class不考慮不同類型的html元素。我正在考慮使用ng-switch，並且在那裏有各種各樣的，但是有沒有其他方法？ – Detuned

我建議使用NG-如果不是納克級的，所以你可以調用在運行外部HTML模板。如果選項或子元素存在，您可以調整該模板以使其在另一個ng-repeat內部重複，以便循環到數組/對象的末尾，而不管其深度如何。

來源

2017-02-17 00:11:15

你有沒有偶然的例子？ – Detuned

使用Angular 1.x遞歸或複製模板

回答

相關問題