Angular 中的树样式选项列表答案

【问题标题】：Tree style options list in AngularAngular 中的树样式选项列表
【发布时间】：2015-02-02 03:08:54
【问题描述】：

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

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

<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: []
        }
    ]
}

【问题讨论】：

<select> 不支持嵌套的 optgroups
否，但您可以使用缩进
对...那么，你为什么有<div>呢？
如果您阅读我的评论，我不知道如何在 Angular 中执行 &nbsp; 的内容，div 是我最初的尝试，我提供的 jsFiddle 用 &nbsp; 显示它 - 我会更新我的问题更清楚
啊，没注意到编辑

标签： angularjs select tree option

【解决方案1】：

使用NgHierarchicalSelector 将解决您的问题。希望对您有所帮助。

【讨论】：

【解决方案2】：

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

我觉得这个问题很有趣的原因是因为你可以在没有自定义指令的情况下“几乎”一直采用解决方案，只要你不使用<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-inits 完成：

<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个&nbsp;：

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

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

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

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

plunker

... 这就是使用<option>s 完成此操作的要求揭示了整个解决方案的地方，这是因为<option>s 不能嵌套，而上面的解决方案需要嵌套（否则无法遍历嵌套结构）。

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

【讨论】：