用angular指令构建嵌套树

build nested tree with angular directive

本文关键字：嵌套 构建 指令 angular      更新时间：2023-09-26

我在像这样的角度控制器中有数据

[
  {name: 'test', parent_id: 0, children_id: 2, id: 1}, 
  {name: 'test', parent_id: 1, children_id: 3, id: 2}, 
  {name: 'test', parent_id: 2, children_id: 0, id: 3}, 
  ...
];

我可以通过parent_id或children_id使用角度指令来构建嵌套树吗？

感谢

您只能使用parent_id来构建树。您甚至不需要children_id

您可以通过ng重复使用角度滤波器组

angular.module('app', ['angular.filter'])
  .controller('MainController', function($scope) {
    $scope.parents = [{
        name: 'test',
        parent_id: 0,
        children_id: 2,
        id: 1
      }, {
        name: 'test',
        parent_id: 1,
        children_id: 3,
        id: 2
      }, {
        name: 'test',
        parent_id: 2,
        children_id: 0,
        id: 3
      }, {
        name: 'test 2',
        parent_id: 2,
        children_id: 0,
        id: 3
      }
    ];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="app" ng-controller="MainController">
  <ul ng-repeat="(parent, children) in parents | groupBy: 'parent_id'">
    parent: {{ parent }}
    <li ng-repeat="child in children">
      child: {{ child.name }}
    </li>
  </ul>
</div>

相关文章：