javascript - Angular 大的嵌套下拉列表

Question

我有一个下拉菜单，其中包含很多嵌套信息。意思是这样的:

Parent 1
  Child 1
  Child 2
  Child 3
    Grandchild 1
    Grandchild 2
    Grandchild 3
    ...
    Grandchild 15
  ...
  Child 25
Parent 2
Parent 3

我需要找到一种方法来优雅地让用户浏览嵌套的下拉菜单。这是我在网上可以找到的最接近我需要的东西:http://dojo.telerik.com/oxEVa但是，当您开始将一堆子项添加到滚动的位置，然后添加一个孙子项时，子项上的滚动会完全中断。有谁知道我可以使用菜单/下拉/组合框指令或库来完成向用户显示这么多数据并允许他们轻松选择它？

Answer 1

您可以使用AngularJS UI Tree 。一开始可能会有点困惑，但对于嵌套结构来说它可以很好地工作。您必须创建一个用于渲染节点及其子节点的模板:

<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
  <div ui-tree-handle>
    {{node.title}}
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes">
    <li ng-repeat="node in node.nodes" ui-tree-node  ng-include="'nodes_renderer.html'">
    </li>
  </ol>
</script>

然后在定义树上使用它:

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