angular.tree icon indicating copy to clipboard operation
angular.tree copied to clipboard

Example of multidimensional (3 or deeper)

Open rosslavery opened this issue 12 years ago • 1 comments

Having a hard time figuring out the expected syntax when you get more than 2 levels deep as shown in the example.

I tried something to the effect of:

<ul ng-tree="clients">
    <li each="account in accounts">
        {{account.name}}
        <ul ng-tree="account">
            <li each="party in account.parties">{{party.name}}</li>
        </ul>
    </li>
</ul>

with no luck... I've also tried:

<ul ng-tree="clients">
    <li each="account in accounts">
        {{account.name}}
        <ul>
            <li each="party in account.parties">{{party.name}}</li>
        </ul>
    </li>
</ul>

Any help would be appreciated. Thank you!

rosslavery avatar Mar 22 '13 22:03 rosslavery

Nested trees are something that should work, but I have not tested that scenario so it may not work as expected. Note that the selection handling would be independent for each tree in that case.

In angular.tree, there is only one template, so you need to make that template handle different node types. Something like this:

<ul ng-tree="clients">
    <li each="item in children()">{{item.name}}</li>
</ul>

Then you would need to define a function on your client, account, and party that returned that node's children list. Unfortunately, at this point, there is not a mechanism to define a function on the scope to return the children list. You can use ngSwitch, ngInclude, etc to customize the node view based on the type of node being rendered.

dump247 avatar Mar 25 '13 17:03 dump247