Question

如何创建一个嵌套的UI-Bootstrap手风琴，其中内外手风琴彼此独立工作。

如果一个手风琴乐队在外面的手风琴中开放，而我正在使用内手风琴，那么它不应该影响外手风琴的状态。下面是我想要实现的示例代码。

（现在发生的事情是，如果我在内手风琴中开了一个小组，它正在关闭父外部手风琴组）

  <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"中的模型（你的插件中的第41和44行），这意味着当这个值改变时，两个手风琴将同时打开和关闭它们的抽屉

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

并且确保所有手风琴都使用不同的属性值，这样可以保持它们正确分离。

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

1 个答案: