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
    }
]

Tree structure

在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>

AngularJS使用ui bootstrap嵌套的手风琴

1 个答案: