AngularJS使用ui bootstrap嵌套的手風琴

Question

我想使用具有父子關系的UI Bootstrap在AngularJS中創建一個手風琴。

問題1：父母也可以有n個兄弟姐妹和孩子。

問題2：一個子元素也可以具有n個內部子元素。 因此必須將其深層嵌套直到最后一個孩子。

問題3：父母也不能生孩子。

[
   {
        "bu_id": 8,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "Parent 2",
        "created_date": "2016-06-26 11:31:07",
        "updated_date": "2016-06-26 11:31:07",
        "parent_id": null
    },{
        "bu_id": 9,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "Child Of Parent 2",
        "created_date": "2016-06-26 11:31:47",
        "updated_date": "2016-06-26 11:31:47",
        "parent_id": 8
    },{
        "bu_id": 10,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "inner Child Parent 2",
        "created_date": "2016-06-26 11:36:30",
        "updated_date": "2016-06-26 11:36:30",
        "parent_id": 9
    },{
        "bu_id": 11,
        "tenant_id": 1,
        "company_id": 1,
        "bu_name": "Parent 3",
        "created_date": "2016-06-26 11:36:30",
        "updated_date": "2016-06-26 11:36:30",
        "parent_id": null
    }
]

樹狀結構

子代和父代在bu_id和parent_id上標識。

Answer 1

我使用ng-repeat-end指令來處理這種情況。 標記如下所示：

<ul>
  <li ng-repeat="item in items">{{item.label}}</li>
  <li ng-repeat-end ng-if="item.children">
    <ul>
      <li ng-repeat="item in item.children">{{item.label}}</li>
    </ul>
  </li>
</ul>

您可以使用“子”項的模板創建指令，以使其深入到您的層次結構中：

angular.module.directive('itemRepeater', function() {
    return {
        template: '<ul>' +
                  '  <li ng-repeat="item in item.children">' +
                  '    {{item.label}}' +
                  '    <li ng-repeat-end ng-if="item.children">' +
                  '      <item-repeater></item-repeater>' +
                  '    </li>' +
                  '  </li>' +
                  '</ul>';
    }
})

然后：

<ul>
  <li ng-repeat="item in items">{{item.label}}</li>
  <li ng-repeat-end ng-if="item.children">
    <item-repeater></item-repeater>
  </li>
</ul>