AngularJS嵌套手风琴使用ui bootstrap

AngularJS Nested accordian using ui bootstrap

本文关键字：ui bootstrap 嵌套 手风琴 AngularJS      更新时间：2023-09-26

我想在AngularJS中使用UI Bootstrap与父子关系创建一个手风琴。

问题1:父母也可以有n个兄弟姐妹和子女。

Issue 2: Child也可以有n个inner Child。所以它必须深嵌套直到最后一个Child。

问题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上标识。

我使用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>
相关文章：