Handle open/collapse events of Accordion in Angular

Question

If I have this code:

      {{group.content}}

         


        

Answer 1

There is the is-open attribute on the accordion-group which points to a bindable expression. You could watch this expression and execute some logic when a given accordion group is open. Using this technique you would change your markup to:

   {{group.content}}

so that you can, in the controller, prepare a desired watch expression:

$scope.$watch('groups[0].open', function(isOpen){
    if (isOpen) {
      console.log('First group was opened'); 
    }    
  });

While the above works it might be a bit cumbersome to use in practice so if you feel like this could be improved open an issue in https://github.com/angular-ui/bootstrap