Angular UI Accordion

Question

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.

Can you create a sample for us?

SomeKittens
– SomeKittens

2014-04-01 20:51:11 +00:00
Commented Apr 1, 2014 at 20:51 — SomeKittens
– SomeKittens, Commented Apr 1, 2014 at 20:51
plnkr.co/edit/teiTTl?p=preview

mhartington
– mhartington

2014-04-01 21:01:17 +00:00
Commented Apr 1, 2014 at 21:01 — mhartington
– mhartington, Commented Apr 1, 2014 at 21:01
Awesome, I was able to figure out a solution for you.

SomeKittens
– SomeKittens

2014-04-01 21:17:32 +00:00
Commented Apr 1, 2014 at 21:17 — SomeKittens
– SomeKittens, Commented Apr 1, 2014 at 21:17

Community · Accepted Answer · 2017-05-23 11:49:53Z

1

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

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Apr 1, 2014 at 21:14

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mhartington Over a year ago

This is great, thanks for the answer, but I do need to function to run when ever the accordion is toggled. Any ideas for that?

Peekmo · Accepted Answer · 2014-04-01 21:13:55Z

0

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..

answered Apr 1, 2014 at 21:13

Peekmo

2,9132 gold badges21 silver badges28 bronze badges

2 Comments

SomeKittens Over a year ago

ng-click won't work in this scenario. He only wants it to be triggered on open, not any click.

mhartington Over a year ago

Actually a click event would work, since the even will fire when the accordion opens and closes. I'm using a customs scrolling container for some mobile events, but for its size to update, I need to call it manually. So I created a simple function to do this but when I try to place the ng-click on the accordion-group, it doesn't fire. plnkr.co/edit/teiTTl?p=preview

Collectives™ on Stack Overflow

Angular UI Accordion

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related