1

I am working on the angular bootstrapUI accordion, I need to catch the toggle event for each section, for example, in each header of section, I have a arrow, when it is open the arrow-down will show,and other arrows in other sections will show arrow-right.something like this:

<accordion-group  is-open="true"  ng-repeat="destination in mileage.destionations">
            <accordion-heading>
                <span ng-class="{'fa-chevron-down': openEvent, 'fa-chevron-right': !openEvent">Toggle Me</span>
            </accordion-heading>
               <div class='accordion-section'>
                    Main content here
                </div>
        </accordion-group>

As you see,How can I toggle the class fa-chevron-down and fa-chevron-right for each section in the accordion-group?

kboul
  • 13,836
  • 5
  • 42
  • 53
linyuanxie
  • 777
  • 4
  • 13
  • 31
  • I'm not sure about hte specifics of the accordion group `openEvent` but you're probably looking for an ng-class ternary example - `` - src: http://stackoverflow.com/questions/12008580/a-ternary-in-templates – jusopi Aug 05 '15 at 18:34
  • Thanks for you help. I know how ng-class works, the issue is I need to catch this event to tell the accordion to show different arrow picture. – linyuanxie Aug 05 '15 at 18:40

1 Answers1

4

You're really close...

change your is-open to a property name, and not a value. Else yours looks like is-open is always open (true).

So like this:

<accordion-group  is-open="isOpen"  ng-repeat="destination in mileage.destionations">
     <accordion-heading>
          <span ng-class="{'fa-chevron-down': isOpen, 'fa-chevron-right': !isOpen">Toggle Me</span>
      </accordion-heading>
      <div class='accordion-section'>
           Main content here
      </div>
 </accordion-group>

Now, when open isOpen will be set to true. When closed, it will be set to false and the icon toggle will work.

isOpen can be anything you like. Its just a $scope property that will be created and set. So you could use is-open="iAmOpenNow" and use iAmOpen in your ng-class :)

Darren Wainwright
  • 30,247
  • 21
  • 76
  • 127
  • Thanks! How stupid I am!, I just moved from JQ, still thinking JQ way, haha. – linyuanxie Aug 05 '15 at 18:50
  • to be fair, their documents for the accordion is really lacking. It took me a few minutes to understand the purpose of `is-open` in that it's really an `ng-model` type attribute. They could have really named it something better. – jusopi Aug 05 '15 at 18:54