Angular UI tree implementation

Question

Can any one provide with a plunker or any hint on how to use http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example

with a json object like this

var list = [
            {
              "id": 1,
              "title": "Parent",
              "items": [
                {
                  "id": 11,
                  "title": "child of Parent",
                  "items": [{
                      "id": 12,
                      "title": "inner child of Parent",
                      "items": [],
                    }],
                },

              ]
            }
        ]

Welcome to stackoverflow. Please refer How to create a Minimal, Complete, and Verifiable example. Here you go http://stackoverflow.com/help/mcve and http://stackoverflow.com/help/how-to-ask. — user861594, Jun 30 '16 at 05:38

score 1 · Answer 1 · answered Dec 21 '16 at 11:51

1

We have a set of examples which can be seen on the website. You can view the data structure on the right hand side of every example.

See https://github.com/angular-ui-tree/angular-ui-tree/tree/master/examples

answered Dec 21 '16 at 11:51

ndequeker

7,932
7
61
93

Chamilyan · Answer 2 · 2016-06-30T05:42:24.977

Lets look at the block in question

<div ui-tree>
  <ol ui-tree-nodes="" ng-model="list">
    <li ng-repeat="item in list" ui-tree-node>
      <div ui-tree-handle>
        {{item.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="item.items">
        <li ng-repeat="subItem in item.items" ui-tree-node>
          <div ui-tree-handle>
            {{subItem.title}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>

item.items is also an array.

You know because the li nested below it is an ng-repeat looping through the values in item.items as subItem.

Angular UI tree implementation

2 Answers2