javascript - AngularJS - 显示项目层次结构，每个分组在其自己的容器中

Question

我想在 AngularJS Controller 中使用 $scope 变量，如下所示:

$scope.hierarchy = {
  name: 'bob',
  selected: true,
  children: [
    { name: 'frank' },
    {
      name: 'spike',
      children: [
        { name: 'mike' },
        { name: 'ben' },
        { name: 'gloria' },
      ]
    },
    {
      name: 'lisa',
      selected: true,
      children: [
        { name: 'bobby' },
        { name: 'carol' },
        { name: 'roger' },
      ]
    },
  ]
}

填充模板。问题是，我想在一个框中的一个级别列出所有内容，并为所选项目的子项添加一个新框(想想 OSX Finder 的文件夹浏览)。

理想情况下，我会有一个 Angular 模板来呈现如下所示的内容:

+------+ +--------+ +-------+
| >bob | |  frank | | bobby |
+------+ |  spike | | carol |
         | >lisa  | | roger |
         +--------+ +-------+

从表面上看，这似乎是一项简单的任务，但要么我脑子太厚，想不出解决方案，要么问题比看起来更难。在此先感谢您的帮助!

Answer 1

基于 Cherniv 的示例， here is a working fiddle .只需更改布局，您就会看到，如果将“selected: true”放在 spike 而不是 lisa 上，它会正确调整。

HTML:

<script type="text/ng-template"  id="tree_item_renderer.html">
    <ul>
        <li ng-repeat="data in data.children">
            {{data.name}}
            <ul>
                <span ng-switch on="data.selected">
                <div ng-switch-when="true" ng-include="'tree_item_renderer.html'">
                </li>
                </span>
            </ul>
        </li>
    </ul>
</script>

<div ng-controller="TreeController">
    <div ng-include="'tree_item_renderer.html'">
    </div>
</div>
</ul>

Javascript:

var myApp = angular.module("myApp", []);
myApp.controller("TreeController", ['$scope', function($scope) {
    $scope.data = {
        children: [{
          name: 'bob',
          selected: true,
          children: [
            { name: 'frank' },
            {
              name: 'spike',
              children: [
                { name: 'mike' },
                { name: 'ben' },
                { name: 'gloria' },
              ]
            },
            {
              name: 'lisa',
              selected: true,
              children: [
                { name: 'bobby' },
                { name: 'carol' },
                { name: 'roger' },
              ]
            }
          ]
        }]
    }

}]);