Como posso criar modelos recursivos no AngularJS ao usar objects nesteds?

Eu estou tentando construir um formulário dinamicamente de um object JSON, que contém grupos nesteds de elementos de formulário:

$scope.formData = [ {label:'First Name', type:'text', required:'true'}, {label:'Last Name', type:'text', required:'true'}, {label:'Coffee Preference', type:'dropdown', options: ["HiTest", "Dunkin", "Decaf"]}, {label: 'Address', type:'group', "Fields":[ {label:'Street1', type:'text', required:'true'}, {label:'Street2', type:'text', required:'true'}, {label:'State', type:'dropdown', options: ["California", "New York", "Florida"]} ]}, ]; 

Eu tenho usado blocos ng-switch, mas torna-se insustentável com itens nesteds, como no object Address acima.

Aqui está o violino: http://jsfiddle.net/hairgamiMaster/dZ4Rg/

Alguma idéia de como abordar melhor esse problema nested? Muito Obrigado!

Eu acho que isso poderia te ajudar. É de uma resposta que encontrei em um Grupo do Google sobre elementos recursivos em uma tree.

A sugestão é de Brendan Owen: http://jsfiddle.net/brendanowen/uXbn6/8/

  

A solução proposta é sobre o uso de um modelo que usa a diretiva ng-include para chamar a si mesmo se o elemento atual tiver filhos.

No seu caso, eu tentaria criar um modelo com a diretiva ng-switch (um caso por tipo de label como você fez) e include o ng-include no final, se houver algum label filho.

Combinando o que @jpmorin e @Ketan sugeriram (ligeira mudança na resposta do @jpmorin, uma vez que ele não funciona como está) … há um ng-if para evitar que “filhos de folha” gerem diretivas desnecessárias ng-repeat :

  

aqui está a versão de trabalho em Plunker

Pode-se considerar o uso do ng-switch para verificar a disponibilidade da propriedade Fields. Em caso afirmativo, use um modelo diferente para essa condição. Este modelo teria uma repetição ng no array Fields.

Eu sei que esta é uma pergunta antiga, mas para outros que podem vir até aqui através de uma pesquisa, eu pensei em deixar uma solução que para mim é um pouco mais clara.

Ele baseia-se na mesma ideia, mas em vez de ter que armazenar um modelo dentro do cache de modelos, etc. Eu desejei uma solução mais “limpa”, então acabei criando https://github.com/dotJEM/angular-tree

É bastante simples de usar:

 
  • {{ node.name }}

    Como a diretiva usa transclusão em vez de compilar (a partir da versão mais recente), isso deve funcionar melhor do que o exemplo ng-include.

    Exemplo baseado nos dados aqui:

     angular .module('demo', ['dotjem.angular.tree']) .controller('AppController', function($window) { this.formData = [ { label: 'First Name', type: 'text', required: 'true' }, { label: 'Last Name', type: 'text', required: 'true' }, { label: 'Coffee Preference', type: 'dropdown', options: ["HiTest", "Dunkin", "Decaf"] }, { label: 'Address', type: 'group', "Fields": [{ label: 'Street1', type: 'text', required: 'true' }, { label: 'Street2', type: 'text', required: 'true' }, { label: 'State', type: 'dropdown', options: ["California", "New York", "Florida"] }] }, ]; this.addNode = function(parent) { var name = $window.prompt("Node name: ", "node name here"); parent.children = parent.children || []; parent.children.push({ name: name }); } this.removeNode = function(parent, child) { var index = parent.children.indexOf(child); if (index > -1) { parent.children.splice(index, 1); } } }); 
     
    • {{field.label}}

      Deseja apenas estender o jpmorin post no caso de estrutura baseada em propriedade:

        JSON: { "id": 203, "question_text_id": 1, "yes": { "question_text_id": 25, "yes": { "question_text_id": 26 } }, "no": { "question_text_id": 4 } } 

      Como você pode ver, o object json não contém estrutura de array.

      HTML

       

      No entanto, você pode iterar sobre isso.

      Documentação angular para ng-repeat over propriedades aqui

      E alguma implementação de linha aqui