如何在不崩潰瀏覽器的情況下顯示未知長度的嵌套數組？

我有一個巨大的數組有組織排序是這樣的：如何在不崩潰瀏覽器的情況下顯示未知長度的嵌套數組？

[{ name: 'name1', 
    nodes: []}, 
{ name: 'name2', 
    nodes: [ 
    { name: 'name21', 
     nodes: [ 
     { name: 'name211', 
      nodes: []}, 
     { name: 'name212', 
      nodes: []}] 
    }] 
}, 
{ name: 'name3', 
    nodes: [...] }, 
{...} 
]

，並繼續...

我試圖用這樣的：

<script type='text/ng-template', id='categoryTree'> 
    <p ng-if='!node.nodes'> {{node.name}} </p> 
    <details ng-if='node.nodes'> 
     <summary><b> {{node.name}}</b></summary> 
     <ul> 
      <span ng-repeat="node in node.nodes" ng-include="'categoryTree'"></span> 
    </details> 
</script> 

<div> 
    <ul> 
     <span ng-repeat="node in objArray" ng-include="'categoryTree'"></span> 
</div>

這給了我什麼我想要以樹形格式顯示所有嵌套數組。問題在於，當我查看任務管理器時，似乎陷入了無限循環，使用的RAM開始增加，並且只在Chrome崩潰時停止。

有誰知道我該怎麼解決這個問題？或者即使我有更好的方法來做這個樹視圖？

來源

2015-05-22 felipefss

聽起來像堆棧溢出條件。你的Angular模板看起來很好，問題可能是在你的對象圖中有一個循環（也就是說，節點數組的一個成員已經存在於樹中的其他地方）。 – Dai

這不是有效的HTML 5而且，您循環遍歷數組中的所有節點，然後爲每個步驟包含循環遍歷數組中所有節點的代碼，其中包含循環遍歷數組中所有節點的代碼等等。 –

在模板中使用node.nodes中的'會停止無限循環。但它仍然是無效的HTML。旁邊的模板不是問題。您沒有任何機制可以說在所包含的模板中使用新節點2作爲變量節點。 –

角並沒有真正處理遞歸指令 - 默認

但是有一個解決方案：

https://github.com/marklagendijk/angular-recursion

你真正需要的是暫時刪除嵌套元素渲染父時。

來源

2015-05-22 21:43:05 gyantasaurus

其實在這裏解釋得非常好：http://stackoverflow.com/a/18609594/4910019 – gyantasaurus

非常感謝！您建議的這一個沒有完成內存使用的技巧，但目前爲止同一頁面中的另一個解決方案幫助很大，沒有任何內存泄漏。 – felipefss

這實際上是迄今爲止我看到的最簡單的方法，它在鏈接函數中執行所有條件工作，而不是在html中執行。 – felipefss

如何在不崩潰瀏覽器的情況下顯示未知長度的嵌套數組？

回答

相關問題