Question

我想要一个显示树的下拉列表select和option列表，因为子项目是缩进的，因此对用户来说它们显然是子项目。当我运行它时，select中几乎没有显示任何内容。理想情况下我喜欢显示like this

我的第二个问题是在选项中使用填充不能工作我必须使用 ，但是如何在模板下传递嵌套信息以输出所需的空格数？

<script type="text/ng-template" id="tree_option_renderer.html">
    <option>{{data.Name}}</option>

    <!-- Would want 1 &nbsp; per level to indent properly, how? -->
    &nbsp;<option ng-repeat="data in data.Children" ng-include="'tree_option_renderer.html'">
</script>

<select id="folderList" ng-show="operatesOnSelector == 0">
    <option ng-repeat="group in addressbook" ng-include="tree_option_renderer.html"></option>
</select>

我的数据看起来有点像这样：

{
    Id: 0,
    Name: "Level 1",
    Children: [
        {
            Id: 1,
            Name: "level 2",
            Children: []
        }
    ]
}

Answer 1

使用NgHierarchicalSelector可以解决您的问题。希望它有所帮助。

Answer 2

这是一个有趣的问题，但快速回答是使用一个自定义指令，它执行一些基本的预订树遍历，以在保持嵌套级别的同时展平结构，然后渲染<options>元素。

我觉得这个问题很有趣的原因是因为你可以采取解决方案＆＃34;几乎＆＃34;没有自定义指令的所有方式，只要您不使用 <option>。

挑战1： ng-repeat在嵌套结构上：

<div ng-repeat="l in data" ng-include="'itemTemplate'"></div>

<script type="text/ng-template" id="itemTemplate">
  {{l.Name}}
  <div ng-repeat="lNext in l.Children"
       ng-init="l = lNext"
       ng-include="'itemTemplate'"></div>
</script>

这实际上可以与CSS一起使用：

<style>
  div > div {
    padding-left: 10px;
  }
</style>

挑战2：跟踪嵌套级别 - 可以使用ng-init来完成：

<div ng-repeat="l in data" ng-include="'itemTemplate'" ng-init="level = 1"></div>

<script type="text/ng-template" id="itemTemplate">
  {{l.Name}}
  <div ng-repeat="lNext in l.Children"
       ng-init="level = level + 1; l = lNext"
       ng-include="'itemTemplate'"></div>
</script>

挑战3：根据嵌套级别生成N  ：

这需要在$scope上定义一个函数（那已经有点时髦了）

$scope.repeat = function(str, n){
  return Array(n).join(str);
};

并在<span>之前添加{{l.Name}}：

<span ng-init="arr = repeat('&nbsp;', level)" ng-bind-html="arr"></span>

plunker

... 这就是要求<option>解决整个解决方案的要求，这是因为<option> s不能嵌套，而上面的解决方案需要嵌套（否则，不能遍历嵌套结构）。

所以，这个答案真的不是答案，因为实际的答案有点无聊。

Angular中的树样式选项列表

2 个答案: