如何创建嵌套的 UI-Bootstrap 手风琴？

Question

如何创建嵌套的 UI-Bootstrap 手风琴，其中内部手风琴和外部手风琴相互独立。

如果一个手风琴组在外手风琴中打开，而我正在内手风琴中做某事，它应该不会影响外手风琴的状态。下面是我想要实现的示例代码。

(What is happening right now is, if I open a group in inner accordion, it is closing the parent outer accordion group)

  <uib-accordion close-others="oneAtATime">

  <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
    Below iss the inner accordion
    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group heading="Static Header, inner accordion" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
        This content is straight in the template.
      </uib-accordion-group>
      <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
        {{group.content}}
      </uib-accordion-group>
      <uib-accordion-group heading="Dynamic Header inner accordion 1t">
        <p>The body of the uib-accordion group grows to fit the contents</p>
        <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
      </uib-accordion-group>
    </uib-accordion>

  </uib-accordion-group>
  <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups1">
    {{group.content}}
  </uib-accordion-group>
</uib-accordion>

I have created a plunker here

Answer 1

你们两个手风琴在 is-open="status.isFirstOpen" 中共享一个模型（你的 plunk 中的第 41 和 44 行），这意味着当该值改变时，两个手风琴将同时打开和关闭它们的抽屉

将内部手风琴的 is-open 更改为其他模型值，例如 is-open="inner_status.isFirstOpen。

并且可以肯定的是，确保所有手风琴的属性都使用不同的值，这将使它们正确解耦。

如何创建嵌套的 UI-Bootstrap 手风琴？

How to create a nested UI-Bootstrap accordion?

angular-ui-bootstrap