¿Cómo puedo crear plantillas recursivas en AngularJS cuando uso objetos nesteds?

Intento crear un formulario de forma dinámica a partir de un objeto JSON, que contiene grupos nesteds de elementos de formulario:

$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"]} ]}, ]; 

He estado usando bloques ng-switch, pero se vuelve insostenible con elementos nesteds, como en el objeto Address anterior.

Aquí está el violín: http://jsfiddle.net/hairgamiMaster/dZ4Rg/

¿Alguna idea sobre cómo abordar mejor este problema nested? ¡Muchas gracias!

Creo que esto podría ayudarte. Es a partir de una respuesta que encontré en un grupo de Google sobre elementos recursivos en un árbol.

La sugerencia es de Brendan Owen: http://jsfiddle.net/brendanowen/uXbn6/8/

  

La solución propuesta consiste en utilizar una plantilla que utiliza la directiva ng-include para llamarse a sí misma si el elemento actual tiene elementos secundarios.

En su caso, trataría de crear una plantilla con la directiva ng-switch (un caso por tipo de etiqueta como lo hizo) y agregar ng-include al final si hay tags hijo.

Combinando lo que @jpmorin y @Ketan sugirieron (un ligero cambio en la respuesta de @ jpmorin ya que en realidad no funciona como está) … hay un ng-if para evitar que los “hijos de hoja” generen directivas ng-repeat innecesarias:

  

aquí está la versión de trabajo en Plunker

Podría considerar usar ng-switch para verificar la disponibilidad de la propiedad Fields. Si es así, entonces use una plantilla diferente para esa condición. Esta plantilla tendría una repetición ng en la matriz Fields.

Sé que esta es una vieja pregunta, pero para otros que podrían venir aquí a través de una búsqueda, pensé que dejaría una solución que para mí es algo más clara.

Se basa en la misma idea, pero en lugar de tener que almacenar una plantilla dentro de la memoria caché de la plantilla, etc. Deseaba una solución más “limpia”, así que terminé creando https://github.com/dotJEM/angular-tree

Es bastante simple de usar:

 
  • {{ node.name }}

    Dado que la directiva utiliza la transclusión en lugar de la comstackción (a partir de la última versión), debería funcionar mejor que el ejemplo ng-include.

    Ejemplo basado en los datos aquí:

     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}}

      Solo quiero extender la publicación de jpmorin en caso de una estructura basada en propiedades:

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

      Como puede ver el objeto json aquí no contiene estructura de matriz.

      HTML

       

      Sin embargo, puede iterar sobre él.

      Documentación angular para ng-repeat over properties here

      Y alguna implementación de fila aquí