Angularjs 角度视图中的树样式选项列表

我需要一个下拉列表

select

和

option

列表，其中显示一个树，其中子项缩进，因此对用户来说它们是子项。当我运行此命令时，

选择中几乎没有显示任何内容。理想情况下，我希望它能显示出来

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

<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>

这是一个有趣的问题，但快速的答案是使用一个自定义指令，该指令执行一些基本的预排序树遍历，以在保持嵌套级别的同时展平结构，然后呈现
元素

我觉得这个问题很有趣的原因是，只要不使用
，您就可以在不使用自定义指令的情况下“几乎”一直使用解决方案

挑战1:
ng在嵌套结构上重复
：

<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>

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

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

并在
{{l.Name}
之前添加一个
：

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




..这就是对
s执行此操作的要求解开了整个解决方案，这是因为
s不能嵌套，而上述解决方案需要嵌套（否则，嵌套结构无法遍历）

所以，这个答案实际上不是答案，因为实际答案有点无聊。
使用将解决您的问题。希望对您有所帮助。
不支持嵌套optgroupsNo，但您可以使用它来对。。。那么，你为什么在那里有
？如果你读了我的评论，我不知道如何用Angular做
的东西，div是我最初的尝试，我提供的jsFiddle用
显示了它-我会更新我的问题使之更清晰，没有注意到编辑
<style>
  div > div {
    padding-left: 10px;
  }
</style>

<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>

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

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