與Angular ngRepeat的樹桌

Question

我們需要根據層次結構顯示一些表格數據。 例如，包含人口和所覆蓋區域的國家列表，以及他們的一些城市。 它可以進入更深層次，如neiborhood等。

Place        Population    Area
---------------------------------
Canada      33,500,000     10,000,000
  Toronto    2,600,000         612
  Montreal   1,300,000         300
USA         317,000,000     9,800,000
  ...          ...             ...
  ...          ...             ...
     ...       ...             ...           
     ...       ...             ... 

我試圖使用Angular和ngRepeat創建一個Tree表來顯示這個層次結構，但它不起作用。 我也嘗試過使用ul和li標簽的Brendan Owen http://jsfiddle.net/brendanowen/uXbn6/8/這個很好的解決方案，但是當使用table和tr / td標簽時它也不起作用。 是否可以為表格完成此操作？

Answer 1

雖然它不使用HTML表格，你有沒有檢查出角度動態樹 ？

它也可能值得查看產生它的博客文章，因為那里消化的代碼少了一點。

如果您正在尋找一個例子，這里有一個jsFiddle 。 你的html會變成這樣的東西：

<ui-tree
    ng-model="assets"
    load-fn="loadChildren"
    expand-to="hierarchy"
    selected-id="111"
    attr-node-id="assetId" />

Answer 2

這個項目提供了良好的Angular樹和良好的追隨者（435+星級）。

https://github.com/nickperkinslondon/angular-bootstrap-nav-tree

可以在這里找到樹的樣本。 http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/bs3_ng120_test_page.html

對於非Angular選項，jquery treetable確實提供了相當簡單的實現。

http://ludo.cubicphuse.nl/jquery-treetable/

每個節點（父節點，子節點或后續子節點）都需要是表中的tr元素，需要指定其自身和父節點的id。

<table>
    <tr data-tt-id="1">
        <td>Parent</td>
    </tr>
    <tr data-tt-id="2" data-tt-parent-id="1">
        <td>Child</td>
    </tr>
</table>