Question

我需要为我的文件结构创建一个递归ng-repeat。

我在互联网上发现的一切都是使用父母/子女比较器。像这样：

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

但是，我的数据存储在firebase中，就像这个JSFIDDLE https://jsfiddle.net/mdp4dfro/6/中显示的那样。（我不会花时间格式化所有这些，所以StackOverflow很高兴....）

现在，这就是我的ng-repeat所拥有的。如果我想添加另一个分支，我必须创建另一个分支。我只想让它自动发生。

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

我如何使这个代码递归，所以它包括每个级别，无论多少级别。

这是我得到的最好的评论，发布的地方，我非常需要帮助，可能需要SPOON FED。抱怨它。

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

现在这就是我得到的，但结果相同，（forEach inEach inEach）.....

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

                })

            })

更新

因此，我设法获取Firebase中的信息以保存“children”中的所有文件夹内容。

所以而不是

css : {
  .. files
}

我有

css : {
  children : {
    .. files
  }
}

这可以更好地使用吗？

有了这个，我想出了HTML Starter。现在我只需要弄清楚递归到我需要的深度......自动。

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

更新两个

我设法做了以下事情。但是当我在模板中添加ng-include来重新运行代码时...我在代码之后得到了错误。

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

错误：

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

删除了ng-include的重复并获得了无限的摘要错误。

似乎布局第一层和第二层文件夹/文件就好了但是一旦它过去就会冻结上面的任何一个错误。

Answer 1

在问题的第二部分中，我需要更新一些内容。

我需要

从模板中的li中删除NG-Include。
替换孩子＆＃39;在带有＆＃39; object＆＃39;

通过改变Firebase中数据的存储方式，最终将此问题放到了最后。更正后的代码如下。

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

递归的AngularJS Ng-Repeat没有父/子比较器

1 个答案: