angularjs遞歸樹與路徑或深度

Question

我想顯示一棵樹使用AngularJS並顯示每個節點的完整路徑。例如，對於下面的模型：

... 
$scope.data = { 
    nodes: [{ 
     name: "Apple", 
     nodes: [{ 
      name: 'Mac', 
      nodes: [{ 
       name: 'iMac' 
      }, { 
       name: 'MacBook' 
      }] 
     }, { 
      name: 'iPad' 
     }] 
    }, { 
     name: "Samsung", 
     nodes: [] 
    }] 
}; 
... 

我想輸出是：

​​

我發現各種樣品在網上產生不完整路徑樹，通常使用UL和李用於縮進輸出，而不是全路徑輸出。我準備在http://jsfiddle.net/JtH7C/下面這些例子至少產生的jsfiddle：

Apple 
Mac 
iMac 
MacBook 
iPad 
Samsung 

的問題是，我的模板中，我想不出如何引用父節點。通過我在一個模板子節點時，父節點是範圍之外（是嗎？）

的模板，它的jsfiddle存在的是：

<script type="text/ng-template" id="tree_item_renderer"> 
    <span>{{data.name}}</span> 
    <div ng-repeat="data in data.nodes"> 
     <div ng-include="'tree_item_renderer'"></div> 
    </div> 
</script> 

我試圖修改如下：

<script type="text/ng-template" id="tree_item_renderer"> 
    <span>{{$parent.data.name}}</span> 
    <span>{{data.name}}</span> 
    <div ng-repeat="data in data.nodes"> 
     <div ng-include="'tree_item_renderer'"></div> 
    </div> 
</script> 

和產生：

Apple Apple 
Mac Mac 
iMac iMac 
MacBook MacBook 
iPad iPad 
Samsung Samsung 

最後一個選擇，也許簡化了親瑕疵，而不是完整的路徑，至少會產生一個深度。我覺得我可以用這個深度來導航一個數組或者一些可以幫助跟蹤樹中「位置」的東西。例如，輸出可能看起來像：（！或兩者）

0 Apple 
1 Mac 
2 iMac 
2 MacBook 
1 iPad 
0 Samsung 

上的完整路徑輸出任何幫助或隨深度產生輸出是非常讚賞。

Answer 1

我用ng-init可以非常接近。我不知道這是否是一個好主意，因爲我的理解是，NG-初始化主要是用於測試，但你可以用它玩：

http://jsfiddle.net/r3XyT/

<div ng-app="a1"> 
    <script type="text/ng-template" id="tree_item_renderer"> 
     <span>{{path}}</span> 
     <div ng-init="path=path+'/'+data.name" ng-repeat="data in data.nodes"> 
      <div ng-include="'tree_item_renderer'"></div> 
     </div> 
    </script> 
    <div ng-app="a2" ng-controller="ngc"> 
    <div ng-include="'tree_item_renderer'"></div> 
    </div> 
</div> 

可能是一個更好的想法是編寫一個展開函數，然後再將它傳遞給ng-repeat。