Recursive AngularJS Ng-Repeat without parent/child comparators

问题

I am needing to create a recursive ng-repeat for my file structure.

Everything I am finding on the interwebs is using parent/children comparators. Like so:

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

However, my data is stored in firebase like what is displayed in this JSFIDDLE, https://jsfiddle.net/mdp4dfro/6/. (I'm not going to take the time to format all that so StackOverflow is happy....)

Right now, this is what I have for my ng-repeat. If I want to add another branch, I have to create another if. I just want this to happen automatically.

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

How would I make this code recursive so it includes every level regardless of how many.

This is the best I got with the comments that where posted, I DESPERATELY NEED HELP HERE, MAY EVEN NEED SPOON FED. SORRY ABOUT IT.

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

Now this is what I got but it's the same result, (forEach within forEach within forEach).....

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

                })

            })

UPDATE

So, I managed to get the information in Firebase to save all the folder contents in "children".

So instead of

css : {
  .. files
}

I have

css : {
  children : {
    .. files
  }
}

Can this be worked with better?

And with this, I came up with the HTML Starter. Now I just need to figure out recursion to go as deep as I need... automatically.

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

Update Two

I managed to make the following. But when I added the ng-include within the template itself to re-run the code... I got the error that follows after 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>

Error:

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

Removed the duplication of the ng-include and got an infinite digest error.

It seems to layout the first and second layer of folders/files just fine but once it gets past that it freezes up with either error above.

回答1:

Within the Update Two Section of the question, I needed to update a few things.

I needed to

Remove the NG-Include from the li in the template.
Replace 'child' in the template with 'object'

This with the combination of altering how the data is stored in Firebase managed to finally put this issue to bed. Corrected code is below.

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

来源：https://stackoverflow.com/questions/41112356/recursive-angularjs-ng-repeat-without-parent-child-comparators

标签

javascript

jquery

angularjs

recursion

angularjs-ng-repeat