Comment puis-je créer des modèles récursifs dans AngularJS lors de l’utilisation d’objects nesteds?

J’essaie de construire un formulaire dynamicment à partir d’un object JSON, qui contient des groupes nesteds d’éléments de formulaire:

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

J’ai utilisé des blocs ng-switch, mais cela devient intenable avec les éléments nesteds, comme dans l’object Address ci-dessus.

Voici le violon: http://jsfiddle.net/hairgamiMaster/dZ4Rg/

Des idées sur la meilleure façon d’aborder ce problème nested? Merci beaucoup!

Je pense que cela pourrait vous aider. C’est à partir d’une réponse trouvée sur un groupe de Google sur les éléments récursifs d’un arbre.

La suggestion est de Brendan Owen: http://jsfiddle.net/brendanowen/uXbn6/8/

  

La solution proposée consiste à utiliser un modèle qui utilise la directive ng-include pour s’appeler si l’élément en cours contient des enfants.

Dans votre cas, je voudrais essayer de créer un modèle avec la directive ng-switch (un cas par type d’étiquette comme vous l’avez fait) et append le ng-include à la fin s’il y a des étiquettes enfants.

En combinant ce que @jpmorin et @Ketan ont suggéré (un léger changement dans la réponse de @jpmorin car cela ne fonctionne pas comme tel) … il y a un ng-if pour empêcher les “enfants feuille” de générer des directives inutiles:

  

voici la version de travail dans Plunker

Pensez à utiliser ng-switch pour vérifier la disponibilité de la propriété Fields. Si oui, utilisez un autre modèle pour cette condition. Ce modèle aurait un ng-repeat sur le tableau Fields.

Je sais que c’est une vieille question, mais pour les autres qui pourraient venir ici par le biais d’une recherche, je pense que je laisserais une solution qui me semble un peu plus soignée.

Il repose sur la même idée, mais plutôt que d’avoir à stocker un modèle dans le cache de modèles, etc. Je souhaitais une solution plus “propre”, j’ai donc créé https://github.com/dotJEM/angular-tree

C’est assez simple à utiliser:

 
  • {{ node.name }}

    Comme la directive utilise la transclusion au lieu de comstackr (à partir de la dernière version), cela devrait être meilleur que l’exemple ng-include.

    Exemple basé sur les données ici:

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

      Je veux juste étendre jpmorin post en cas de structure basée sur la propriété:

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

      Comme vous pouvez le voir, l’object json ne contient pas de structure de tableau.

      HTML

       

      Cependant, vous pouvez itérer dessus.

      Documentation angular pour ng-repeat sur les propriétés ici

      Et une implémentation de ligne ici