Sateesh Kumar Alli Sateesh Kumar Alli - 1 month ago 9
AngularJS Question

How to close uib-accordion from inside with a button click

I would like to close accordion from inside with a button click. I am trying to set

isOpen
to false but it's not working. Is there any way to close it on button click? Thank you.

Plunker here: https://plnkr.co/edit/3xMnWRPOoEHPmguaQxd0?p=preview



<div uib-accordion-group is-open="isOpen" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
<button ng-click="close()">close this</button>
</div>




$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];


$scope.isOpen = false;

$scope.close = function(){
$scope.isOpen = false;
}

Answer

You can make use of ng-init to assign new attribute isOpen while looping with ng-repeat. Updated Plunker code.

Change template without adding attributes in controller:

<div uib-accordion-group ng-init="group.isOpen=false" is-open="group.isOpen" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
  {{group.content}}
  <button ng-click="group.isOpen=false">close this</button>
</div>

EDIT:

If you don't want to alter the existing object then you can have array isOpen which maintains open state of accordion groups. Plunker code.

<uib-accordion close-others="oneAtATime" ng-init="isOpen=[]">

    <div uib-accordion-group ng-init="isOpen[$index]=false" is-open="isOpen[$index]" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
      <button ng-click="isOpen[$index]=false">close this</button>
    </div>

</uib-accordion>