私のファイル構造に対して再帰的なng-repeatを作成する必要があります。親/子コンパレータを使用しない再帰的AngularJS Ng-Repeat
私がインターウェブ上で見つけたものはすべて、親子コンパレータを使用しています。これと同じように：
$scope.categories = [
{
title: 'Computers',
categories: [
{
title: 'Laptops',
categories: [
{
title: 'Ultrabooks'
},
{
title: 'Macbooks'
}
]},
// ......continued.....
しかし、私のデータは、このJSFIDDLE、https://jsfiddle.net/mdp4dfro/6/に表示されているもののようにfirebaseに格納されます。 （私は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>
それは関係なく、どのように多くのすべてのレベルが含まれるので、どのように私はこのコードを再帰的になるだろう。
これは私が投稿したところで私が意図的にヘルプを必要としているというコメントを得た最高のものです。それについて悲しい。
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）.....
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
だから、私が管理Firebaseの情報を取得して、すべてのフォルダの内容を「子」に保存します。
は、だからではなく、
css : {
.. files
}
の私は
css : {
children : {
.. files
}
}
を持って、これはより良いと仕事することはできますか？
これで、私はHTMLスターターを思いついた。今すぐ必要なだけ深く進むために再帰を理解する必要があります...自動的に。
<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-含めるの重複を削除し、無限のダイジェストエラーを得ました。
フォルダ/ファイルの最初と2番目のレイヤーはうまくレイアウトされているようですが、一度上がってしまうと上記のどちらのエラーでもフリーズします。
データをネストされた配列にマップして表示します。それが平らに保管されているからといって、常にその方法で使用しなければならないわけではありません。 – charlietfl
最大深さを知らずにどうしますか？ –
再帰的マッピング関数を使用して – charlietfl