Angular UI 树实现答案

【问题标题】：Angular UI tree implementationAngular UI 树实现
【发布时间】：2016-11-02 01:06:31
【问题描述】：

任何人都可以提供一个 plunker 或任何关于如何使用http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example的提示

使用像这样的 json 对象

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

              ]
            }
        ]

【问题讨论】：

欢迎来到stackoverflow。请参阅如何创建最小、完整和可验证的示例。给你stackoverflow.com/help/mcve和stackoverflow.com/help/how-to-ask。

标签： javascript angularjs angular-ui angular-ui-tree

【解决方案1】：

我们有一组可以在网站上看到的示例。您可以在每个示例的右侧查看数据结构。

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

【讨论】：

【解决方案2】：

让我们看看有问题的块

<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 也是一个数组。

您知道，因为嵌套在它下面的 li 是一个 ng-repeat 循环遍历 item.items 中的值作为 subItem。

【讨论】：