Question

我想在AngularJS控制器中使用一个$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的文件夹浏览）。

理想情况下，我会使用一个角度模板来呈现如下所示的内容：

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

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

Answer 1

基于切尔诺夫的例子， 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' },
              ]
            }
          ]
        }]
    }

}]);

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

1 个答案: