Angularjs isOpen State Accordion Access

Question

Is there a way to access the open accordion band? I know there is an isOpen directive, but I'm not sure if there is a way to access the state of this, but only in html. Using (and abusing?) Two-way binding, I can set a variable to hold this state, but it will not work for nested accordions without doing something like isOpen0, isOpen1, isOpen2, etc. I can also use ng-init to “declare” the new isOpen in the field of nested accordions, but that doesn't seem 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

Answer 1

First, you must use the parent object as in the Angular UI docs example, status 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 use the same object name for the nested accordion. The reason is simple: the accordion-group directive will create new features for each group. Thus, when a status.isOpen changed, it will not affect other groups.

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