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>

角度中的大型嵌套下拉列表

1 个答案: