I am using uib-accordion directive and I want to add a button to expand/close all elements in the accordion. My code is like this:
<uib-accordion close-others="false">
<div align="right">
<a href="" ng-click="showFunc = !showFunc"> {{ showFunc ? "Hide all" : "Show all" }} </a>
</div>
<uib-accordion-group is-open="showFunc" ng-repeat="fun in functions" heading="{{ fun.name }}" is-disabled="!fun.show">
</uib-accordion-group>
What happens is when I click the expand all button works as far as you dont click each panel individually, what creates the variable showFunc inside the scope of the panel and the is-show directive gets it from there.
How it could be done? I am using angular 1.6.2
Thanks.
I think you are mixing different variables in different contexts (each iteration of ngRepeat creates a different context and you mistakenly(?) assign each a different showFunc variable) and making a mess.
What you can do is assign a variable that will be global to the accordion, toggle it on button click and then assign all
is-open
object properties to that value, I bind anopen
property to each object so I could easily traverse the objects and access it.HTML
JS
Using forEach for simplicity
Demo plunker