angularjs 嵌套的手风琴关闭-其他不工作

Question

我有一个多级手风琴，使用 "accordion" 和 "accordion-group" 标签进入 angularJS。我在父手风琴中使用 close-others="false"，在嵌套手风琴中使用 close-others="true"。

与外部面板允许扩展多个组而内部面板只允许一个的预期行为不同，我看到的是父面板和子面板都允许同时打开多个组。

<accordion close-others="false">
  <!-- Outer Group #1 -->
  <accordion-group heading="Outer Group #1" ng-init="status.isOuterGroup1Open = true" 
       is-open="status.isOuterGroup1Open">
    <!-- Outer Content Here -->
  </accordion-group>

  <!-- Outer Group #2 -->
  <accordion-group heading="Outer Group #2" ng-init="status.isOuterGroup2Open = true" 
       is-open="status.isOuterGroup2Open">
    <accordian close-others="true">
      <!-- Inner Groups -->
      <accordion-group data-ng-repeat="outerItem in outerItems" 
           heading="{{outerItem.name}}">
        <div data-ng-repeat="innerItem in outerItem.children">
          <!-- Inner content here -->
          {{innerItem.name}}
        </div>
      </accordion-group>
    </accordian>
  </accordion-group>
</accordion>

有什么解决方法吗？

Answer 1

在您的示例中，在 'Outer Group #2' 中您有 'accordian'，而它应该是 'accordion'。我认为这就是问题所在。这是已应用修复程序的代码：

<accordion close-others="false">
  <!-- Outer Group #1 -->
  <accordion-group heading="Outer Group #1" ng-init="status.isOuterGroup1Open = true" 
       is-open="status.isOuterGroup1Open">
    <!-- Outer Content Here -->
  </accordion-group>

  <!-- Outer Group #2 -->
  <accordion-group heading="Outer Group #2" ng-init="status.isOuterGroup2Open = true" 
       is-open="status.isOuterGroup2Open">
    <accordian close-others="true">
      <!-- Inner Groups -->
      <accordion-group data-ng-repeat="outerItem in outerItems" 
           heading="{{outerItem.name}}">
        <div data-ng-repeat="innerItem in outerItem.children">
          <!-- Inner content here -->
          {{innerItem.name}}
        </div>
      </accordion-group>
    </accordian>
  </accordion-group>
</accordion>

如果更改不能解决问题，你能请 post 一个 plunker 吗？

angularjs 嵌套的手风琴关闭-其他不工作

angularjs nested accordion close-others not working

nested

accordion

twitter-bootstrap

angularjs