如何在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 應用時，樹形數據結構將會展示在頁面上。