没有父/子比较器的递归 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.净/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 中的 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.
将模板中的child"替换为object"
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屋！
