How to disable clicking on an accordion group heading?

Question

This is a cut down version of the accordion example here.

  <accordion>
    <accordion-group heading="Static Header">
      This content is straight in the template.
    </accordion-group>
  </accordion>

How is it possible to disable clicking on the accordion group heading. I tried ng-disabled=true on the accordion element and the accordion-group element but it does not work.

Solution 1

According to the source there is an isDisabled property on the accordeon group, which is used in the toggle function. This should be the way to disable a panel.

https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

The toggle function:

scope.toggleOpen = function() {
 if ( !scope.isDisabled ) {
     scope.isOpen = !scope.isOpen;
 }
};

edit: this is not part of the 0.10 version you are using, so you have to get the main version, or make the change yourself.

Solution 2

You need to get the latest ui-bootstrap libraries (No released version yet, need to get the Master) and use something like

<accordion-group is-disabled="true" heading="Static Header">

This is not even present in the 0.10.0 that you are using in your plnkr