Angular UI 手风琴中的手风琴

Question

在 Angular UI 中有没有办法在手风琴中放置手风琴？我希望顶级列表全部关闭，直到 selected 一个项目，然后打开手风琴以显示另一个也会打开和关闭的手风琴列表。

在我当前的实现中，当我 select 内部列表项时，两个手风琴都被触发，而内部的则关闭。它们不是在自己的 $scope 中吗？

这个问题很相似，但是jQuery：accordion within accordion collapses parent accordion

<accordion>
  <accordion-group ng-repeat="folder in folders | orderBy:'name' " ng-click="select_folder(folder)">
    <accordion-heading>
      {{ folder.name }}
    </accordion-heading>
    <accordion>
      <accordion-group ng-repeat="file in folder.files">
        <accordion-heading>
          {{ file.name }}
        </accordion-heading>
        {{ file.info }}
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>

Answer 1

我想我找到了问题所在。 <accordion-group> 标签上不应有 ng-click 属性。通过将其向下移动到 <accordion-heading> 标记，嵌套手风琴可以正常工作。这也在这里讨论：

<accordion>
  <accordion-group ng-repeat="folder in folders | orderBy:'name' ">
    <accordion-heading>
      <span ng-click="select_folder(folder)">{{ folder.name }}</span>
    </accordion-heading>
    <accordion>
      <accordion-group ng-repeat="file in folder.files">
        <accordion-heading>
          <span ng-click="select_folder(folder)">{{ file.name }}</span>
        </accordion-heading>
        {{ file.info }}
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>

另一种方法是 $watch is-open 属性中的值：

Angular UI 手风琴中的手风琴

Angular UI accordion within an accordion

accordion

angularjs