10

Is there a way to access whether an accordion-group is open or not? I know there's the isOpen directive but I'm not sure if there's a way to access the state of that while purely in the html. Using (and abusing?) two way binding I can set a variable to hold that state but it will not work out for nested accordions without doing something like isOpen0, isOpen1, isOpen2, etc. I can also use ng-init to "declare" a new isOpen on the scope of the nested accordions but that doesn't sound like a good idea.

  <accordion>
    <accordion-group is-open="isOpen">
      <accordion-heading>
         <div ng-class="{'myClass': isOpen}">Static Text</div>
      </accordion-heading>
      This content is straight in the template.
    </accordion-group>
  </accordion>

http://plnkr.co/edit/l5y4raei99pedNWcE225

Guillaume Husta
  • 4,049
  • 33
  • 40
Teeknow
  • 1,015
  • 2
  • 17
  • 39

2 Answers2

16

First, you have to use a parent object like in Angular UI's docs' example, status object for example:

  <div accordion-group="" ng-init="status = {isOpen: false}" is-open="status.isOpen">
      <div accordion-heading="">
          <div ng-class="{'is-open': status.isOpen}">NUTRIENT PROFILES</div>
      </div>
      ...
  </div>

Then, you can perfectly use the same object name for nested accordion. Reason is simple: accordion-group directive will instantiate a new scope for each group. This way, when a status.isOpen is changed, it won't affect other groups.

Check it: http://plnkr.co/edit/nJ654pvE1itnGDQGp2rk?p=preview

ngasull
  • 4,206
  • 1
  • 22
  • 36
  • 1
    Great it works this way. In a **ng-repeat** iteration, you could even replace by `ng-init="status = {isOpen: $first}"`to open the first element. – Guillaume Husta Jan 14 '15 at 14:08
0

You don't need to create an object. Just create a variable in the following way:

<li uib-accordion-group ng-init="isOpen=true" is-open="isOpen">
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Pavel Zayats
  • 1
  • 1