CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-bootstrap
mhartington
mhartington

Reputation: 7025

Angular UI Accordion

I'm trying to find out how to watch Angular UI's accordion is-open event so I can have a call back when ever any of my accordions are closed.

This is the basic structure of my accordion's (refined just to show one.)
One thing to note is that these are actually static content, nothings dynamic.

<accordion-group is-open="true">

  <accordion-heading>
    <h3>Some Header</h3>
  </accordion-heading>

  <h4>Some pretty awesome content!</h4>
</accordion-group>

My controller

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

Heres a demo I'm getting the console.log to fire once upon load, but not when I close any other accordions. Any ideas? Any help is appreciated.

Upvotes: 0

Views: 2422

Answers (2)

SomeKittens
SomeKittens

Reputation: 39522

I'm assuming you're finding the code here. That isn't working for you, because you're not using ng-repeat to generate your accordions. Instead, bind to the is-open attribute:

angular.module('plunker', ['ui.bootstrap']);

function AccordionDemoCtrl($scope) {
$scope.oneAtATime = true;    
$scope.first = {
  open: true
}
  $scope.$watch('first.open', function (isOpen) {      
    console.log('First group was toggled');    
  }); 
}

Relevant HTML:

 <accordion-group is-open="first.open">

  <accordion-heading>
    <h3>Some Header</h3>
  </accordion-heading>

  <h4>Some pretty awesome content!</h4>
</accordion-group>

Plunk

Upvotes: 1

Peekmo
Peekmo

Reputation: 2903

Why are you not using a ng-click event ? That's clearly better to bind your function on the "click" event than watching it. So, if you can avoid it..

Upvotes: 0

Related Questions