Angular UI accordion within an accordion

Question

Is there a way in Angular UI to have an accordion within an accordion? I want the top level list to all be closed until one item is selected, and then to accordion open to show another accordion list that will also open and close.

With my current implementation, when I select the inner list item both accordions are triggered, leaving the inner one closed. Aren't they in their own $scopes?

This question is similar, but for 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>

this may sound stupid, but try adding `ng-if="true"` to the inner `accordion-group`. `ng-if` will force a new isolated scope (which is a hacky side-effect). This is not intended as a solution, but if it works it's a clue as to the problem and then possibly a good solution. — Samuel Neff, Jul 29 '15 at 05:29
Another option that may be ok for you but is not exactly what you're asking for is to set `close-others` on each accordion to false. — Samuel Neff, Jul 29 '15 at 05:31
Update: I'm pretty sure this is not related to scopes at all. Accordions store their array of accordion groups in a local variable declared inside AccordionController. — Samuel Neff, Jul 29 '15 at 05:47
Then it sounds like it's possible to have nested accordion lists. — Brent Washburne, Jul 29 '15 at 16:56
Seems like it should be possible. I don't know why it isn't working. I looked through the accordion code on github and nothing stood out as a clear explanation. If you create a Plunkr I'll look into it some more. I'm curious too. — Samuel Neff, Jul 29 '15 at 17:40

score 0 · Accepted Answer · edited May 23 '17 at 11:51

I think I found the problem. There should not be an ng-click attribute on the <accordion-group> tag. By moving that down to the <accordion-heading> tag, the nested accordions work correctly. This is also discussed here: https://stackoverflow.com/a/18497935/584846

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

An alternative is to $watch the value in the is-open attribute: https://stackoverflow.com/a/15642577/584846

Angular UI accordion within an accordion

1 Answers1