2017-02-16 7 views
0

У меня есть структура данных (пример представлен ниже), где мне нужно итерации по этому набору вопросов и возможность их шаблона в угловом формате. Каждый «вопрос» имеет такую ​​структуру:Рекурсивный или сложный шаблон с угловым 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 является то, что множество questions, которые отображаются в options являются отображением в той же строке как родительский вопрос, тогда как questions внутри children отображаются на одной строке ниже с небольшим количеством левого поля.

Я не достаточно знаком с Angular о том, как вы достигнете этого, учитывая, что базового 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: [] 
      } 
     ] 
    } 
]; 
+0

Вам нужно будет использовать вложенные ng-повторы и применить ng-класс в зависимости от типа элемента, который вы зацикливаете, чтобы параметры и дети выглядели иначе, применяя классы css. –

+0

Да, это то, что я изначально имел, однако, он не решает следующих проблем: --------- 1) Вложенные ng-повторы не хуже, чем многие уровни, которые вы пишете. поэтому почему мне было интересно, есть ли другой способ сделать это? ------- 2) ng-класс не учитывает различные типы элементов html. я думал об использовании ng-switch и наличии всех различных там, но есть ли другой способ? – Detuned

ответ

1

я предлагаю использовать нг-если вместо нг-класс, так что вы можете вызвать внешний шаблон HTML на лету. Вы можете настроить этот шаблон, чтобы иметь внутри другого ng-repeat, если существуют варианты или дочерние элементы, поэтому вы зацикливаете до конца массива/объекта независимо от его глубины.

+0

У вас есть несколько примеров случайно? – Detuned