Angular JS复杂树视图

Question

我有一个复杂的JSON。我可以使用它来创建树视图。这是样本json。一个项目可以有任务，子项目，可以进入任何深度。

$scope.data = [{ "id": 1, "title": "node1", "TaskNodes" : [ { "id": 113, "title": "Parent Task node1.1.3", "TaskNodes": [{ "id": 1131, "title": "Child Task node1.1.3", "TaskNodes": []
}] } ], "nodes": [ { "id": 11, "title": "node1.1", "TaskNodes" : [ { "id": 112, "title": "Task node1.1.2", "TaskNodes": [] } ], "nodes": [ { "id": 111, "title": "node1.1.1", "nodes": [] } ] }, { "id": 12, "title": "node1.2", "nodes": [] } ], }, { "id": 2, "title": "node2", "nodes": [ { "id": 21, "title": "node2.1", "nodes": [] }, { "id": 22, "title": "node2.2", "nodes": [] } ], }, { "id": 3, "title": "node3", "nodes": [ { "id": 31, "title": "node3.1", "nodes": [] } ], }]; });

这是使用angular-ui-tree

的渲染html

<!-- Nested node template -->
        <script type="text/ng-template" id="nodes_renderer.html">
          <div ui-tree-handle class="tree-node tree-node-content">
            <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
            {{node.title}}
            <a class="pull-right btn btn-danger btn-xs" nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
            <a class="pull-right btn btn-primary btn-xs" nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
          </div>
          <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
            <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
            </li>
          </ol>
        </script>

        <script type="text/ng-template" id="TaskNodes_renderer.html">
          <div ui-tree-handle class="tree-node tree-node-content">
            <a class="btn btn-success btn-xs" ng-if="TaskNode.TaskNodes && TaskNode.TaskNodes.length > 0" nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
            {{TaskNode.title}}
            <a class="pull-right btn btn-danger btn-xs" nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
            <a class="pull-right btn btn-primary btn-xs" nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
          </div>
          <ol ui-tree-nodes="" ng-model="TaskNode.TaskNodes" ng-class="{hidden: collapsed}">
            <li ng-repeat="TaskNode in TaskNode.TaskNodes" ui-tree-node ng-include="'TaskNodes_renderer.html'">
            </li>
          </ol>
        </script>

        <div ui-tree id="tree-root">
          <ol ui-tree-nodes ng-model="data">
            <li ng-repeat="TaskNode in data" ui-tree-node ng-include="'TaskNodes_renderer.html'"></li>      

            <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
          </ol>
        </div>
      </div>

我需要为此创建一个树视图。我已经为一个孩子找到了很多类型但在我的情况下它是一个双chidlren类型。

感谢任何帮助。谢谢。 Sanjeev