Recurrente AngularJS Ng-Repeat sans comparateurs parents / enfants

J'ai besoin de créer une récurrente ng-repeat pour ma structure de fichier.

Tout ce que je trouve sur les interwebs utilise des comparateurs parent / enfants. Ainsi:

$scope.categories = [ { title: 'Computers', categories: [ { title: 'Laptops', categories: [ { title: 'Ultrabooks' }, { title: 'Macbooks' } ]}, // ......continued.....

Cependant, mes données sont stockées dans une base de feu comme ce qui est affiché dans cette JSFIDDLE, https://jsfiddle.net/mdp4dfro/6/ . (Je ne vais pas prendre le temps de formater tout cela, donc StackOverflow est heureux ….)

En ce moment, c'est ce que j'ai pour mon ng-repeat. Si je veux ajouter une autre branche, je dois créer une autre si. Je veux simplement que cela se produise automatiquement.

 <ul> <li ng-repeat="(foKey, folder) in projects.projectCode"> <span ng-if="!foKey.indexOf('-') == 0"> <b>{{foKey}}</b> <ul> <li ng-repeat="(obKey, object) in folder"><span ng-if="!foKey.indexOf('-') == 0"><span ng-if="obKey.indexOf('-') == 0">{{object.Name}}</span> <span ng-if="!obKey.indexOf('-') == 0"><b>{{obKey}}</b></span></span></li> <li style="list-style: none"></li> </ul> </span> <span ng-if="foKey.indexOf('-') == 0">{{folder.Name}}</span> </li> </ul>

Comment puis-je rendre ce code récursif pour qu'il inclue tous les niveaux indépendamment de combien.

C'est le meilleur que j'ai obtenu avec les commentaires que j'ai affichés, j'ai désespérément besoin d'aide ici, je pourrais néanmoins avoir besoin de FOU. DÉSOLÉ POUR CELA.

 projectRef.child('code').once('value', function(snapshot){ var tree = []; angular.forEach(snapshot.val(), function(object, key){ if(object.Key) { console.log(object.Key); } else { tree.push(object); } }) projects.projectCode = tree; })

Maintenant, c'est ce que j'ai obtenu, mais c'est le même résultat, (pour tout au long de tout au moins pour chaque …)

 projectRef.child('code').once('value', function(snapshot){ angular.forEach(snapshot.val(), function(data, key){ if(!key.indexOf('-') == 0) // Is Folder { } else if(key.indexOf('-') == 0) // Is File { console.log(data.Name); } }) })

METTRE À JOUR

Donc, j'ai réussi à obtenir l'information dans Firebase pour enregistrer tout le contenu du dossier dans "les enfants".

Donc, au lieu de

 css : { .. files }

j'ai

 css : { children : { .. files } }

Peut-on travailler mieux?

Et avec cela, je suis venu avec le démarreur HTML. Maintenant, j'ai juste besoin de comprendre la récurrence pour aller aussi profond que j'ai besoin … automatiquement.

 <ul class="fa-ul"> <li class="" ng-repeat="object in projects.projectCode"> <span ng-if="object.children"><i class="fa fa-folder"></i> {{object.$id}}</span> <ul class="fa-ul"> <li class="" ng-repeat="(key, child) in object.children"><span ng-if="object.children"><span ng-if="child.children"><i class="fa fa-folder"></i> {{key}}</span> <span ng-if="!child.children && child.Name"><i class="fa fa-file"></i> {{child.Name}}</span></span></li> <li style="list-style: none"></li> </ul><span ng-if="!object.children && object.Name"><i class="fa fa-file"></i> {{object.Name}}</span> </li> </ul>

Mise à jour de deux

J'ai réussi à faire ce qui suit. Mais lorsque j'ai ajouté la ng-include dans le modèle lui-même pour ré-exécuter le code … J'ai eu l'erreur qui suit après le code.

 <ul class="fa-ul"> <li class="" ng-repeat="object in projects.projectCode"> <span ng-if="object.children"> <i class="fa fa-folder"></i> {{object.$id}} <span ng-include="'field_renderer.html'"></span> </span> <span ng-if="!object.children && object.Name"> <i class="fa fa-file"></i> {{object.Name}} </span> </li> </ul> <script type="text/ng-template" id="field_renderer.html"> <ul class="fa-ul"> <li class="" ng-repeat="(key, child) in object.children" ng-include="'field_renderer.html'"> <span ng-if="child.children"> <i class="fa fa-folder"></i> {{key}} <span ng-include="'field_renderer.html'"></span> </span> <span ng-if="!child.children && child.Name"> <i class="fa fa-file"></i> {{child.Name}} </span> </li> </ul> </script>

Erreur:

 angular.js:13920 TypeError: Cannot read property 'insertBefore' of null

Supprime la duplication du ng-include et obtient une erreur de synthèse infinie.

Il semble que la première et la deuxième couche de dossiers / fichiers soient bien définies, mais une fois qu'il est dépassé, il se bloque avec l'erreur ci-dessus.

Dans la section Mise à jour deux de la question, je devais mettre à jour quelques éléments.

j'avais besoin de

Supprimez le NG-Include à partir du li dans le modèle.
Remplacez 'child' dans le modèle par 'objet'

Ceci avec la combinaison de modifier la façon dont les données sont stockées dans Firebase a réussi à mettre définitivement ce problème au lit. Le code corrigé est ci-dessous.

 <ul class="fa-ul"> <li class="" ng-repeat="object in projects.projectCode"> <span ng-if="object.children"> <i class="fa fa-folder"></i> {{object.$id}} <span ng-include="'field_renderer.html'"></span> </span> <span ng-if="!object.children && object.Name"> <i class="fa fa-file"></i> {{object.Name}} </span> </li> </ul> <script type="text/ng-template" id="field_renderer.html"> <ul class="fa-ul"> <li class="" ng-repeat="(key, object) in object.children"> <span ng-if="object.children"> <i class="fa fa-folder"></i> {{key}} <span ng-include="'field_renderer.html'"></span> </span> <span ng-if="!object.children && object.Name"> <i class="fa fa-file"></i> {{object.Name}} </span> </li> </ul> </script>