如何在AngularJS中实现树形数据结构展示

在 AngularJS 中，可以使用自定义指令、递归模板和控制器来展示树形数据结构。以下是实现树形数据结构的步骤：

1. 准备数据：首先，需要准备一个树形数据结构。每个节点包含 id、name 和 children 属性。children 属性是一个包含子节点的数组。

$scope.treeData = [
  {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 1.1',
        children: [
          {
            id: 4,
            name: 'Node 1.1.1'
          },
          {
            id: 5,
            name: 'Node 1.1.2'
          }
        ]
      },
      {
        id: 3,
        name: 'Node 1.2'
      }
    ]
  },
  {
    id: 6,
    name: 'Node 2',
    children: [
      {
        id: 7,
        name: 'Node 2.1'
      }
    ]
  }
];

2. 创建自定义指令：接下来，创建一个名为 tree 的自定义指令，用于处理树形结构的展示。

angular.module('app').directive('tree', function() {
  return {
    restrict: 'E',
    scope: {
      treeData: '='
    },
    templateUrl: 'tree-template.html',
    controller: 'TreeController'
  };
});

3. 创建递归模板：在 tree-template.html 文件中，创建一个递归模板，用于展示树形结构。

<ul>
  <li ng-repeat="node in treeData" data-id="{{node.id}}">
    {{node.name}}
    <tree tree-data="node.children"></tree>
  </li>
</ul>

4. 创建控制器：创建一个名为 TreeController 的控制器，用于处理树形结构的数据。

angular.module('app').controller('TreeController', function($scope) {
  // 控制器逻辑
});

5. 在主布局中使用指令：最后，在主布局文件（如 index.html）中使用 tree 指令，并将树形数据作为绑定。

<div ng-app="app">
  <tree tree-data="treeData"></tree>
</div>

现在，当运行 AngularJS 应用时，树形数据结构将会展示在页面上。