没有父/子比较器的递归AngularJS Ng-Repeat [英] Recursive AngularJS Ng-Repeat without parent/child comparators
问题描述
我需要为我的文件结构创建一个递归ng-repeat.
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.....
但是，我的数据存储在Firebase中，就像在此JSFIDDLE中显示的一样， https://jsfiddle. net/mdp4dfro/6/. (我不会花时间格式化所有格式，因此StackOverflow很高兴....)
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....)
现在，这就是我的ng-repeat所需要的.如果要添加另一个分支，则必须创建另一个if.我只希望这自动发生.
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;
})
现在这就是我得到的，但是结果是一样的，(forEach内的forEach内).....
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);
}
})
})
更新
因此，我设法在Firebase中获取信息，以将所有文件夹内容保存在子级"中.
So, I managed to get the information in Firebase to save all the folder contents in "children".
所以不是
css : {
.. files
}
我有
css : {
children : {
.. files
}
}
这可以更好地工作吗?
有了这个，我想到了HTML Starter.现在，我只需要弄清楚递归就可以自动完成.
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>
更新两个
我设法做到以下几点.但是，当我在模板本身中添加ng-include来重新运行代码时...我得到了紧随代码之后的错误.
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>
错误:
angular.js:13920 TypeError: Cannot read property 'insertBefore' of null
删除了ng-include的重复项，并得到了无限的摘要错误.
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.
推荐答案
在问题的更新两个"部分中，我需要更新一些内容.
Within the Update Two Section of the question, I needed to update a few things.
我需要
-
从模板中的li中删除NG-Include.
Remove the NG-Include from the li in the template.
将模板中的子级"替换为对象"
Replace 'child' in the template with 'object'
这与更改数据在Firebase中的存储方式的组合最终使这一问题得以解决.更正的代码如下.
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>
这篇关于没有父/子比较器的递归AngularJS Ng-Repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
