Таблица деревьев с угловым 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 
    ...   ...    ... 
    ...   ...    ... 
    ...  ...    ...   
    ...  ...    ... 

Я пытался использовал Угловые и ngRepeat для создания таблицы дерева, чтобы отобразить эту иерархию, но она не работает. Я также пробовал это хорошее решение от Brendan Owen http://jsfiddle.net/brendanowen/uXbn6/8/, в котором используются теги ul и li, но он не работает ни при использовании табличных и тэгов/тд. Можно ли сделать это за столом?

Answer 1

Хотя он не использует таблицу HTML, вы проверили angular dynamic-tree?

Возможно также стоит проверить сообщение в блоге, которое spawned it, так как здесь есть немного меньше кода для переваривания.

Если вы ищете пример, вот jsFiddle. Где ваш HTML просто стать чем-то вроде:

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

Answer 2

Этого проекта предлагает хорошее Угловое дерево с хорошим следующим (435+ избранных).

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

Образец дерева можно найти здесь. http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/bs3_ng120_test_page.html

Для опции без углов, jquery treetable предлагает довольно легкую реализацию.

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

Каждый узел (родитель, ребенок или последующие дети) должен быть тр элемент в таблице, нуждаясь указать идентификатор своего собственного и родительского узла.

<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>