Add class to accordion heading using AngularJS ui-bootstrap?

Question

I want use ng-class to conditionally add a class to the accordion-heading, but it appears that not even setting a class explicitly on the element gets preserved. I have this:

<div accordion close-others="true">
    <div ng-repeat="currItem in items" accordion-group>
        <div accordion-heading class="myClass">My Heading {{$index}}</div>
        <div class="accordion-inner myClass">asdf asdf asdf</div>
    </div>
</div>

And the fiddle: http://jsfiddle.net/Zmhx5/1/

When I inspect the accordion heading element, the class myClass is nowhere to be found. Is there some reason I can't add classes to the accordion heading?

Answer 1

You can put the CSS inside the directive accordion-heading tags:

<accordion-heading>
    <div class="myClass">My Heading {{$index}}</div>
</accordion-heading>

Answer 2

In Angular UI Bootstrap, they have created a directive for accordion-heading. Template for this is written in ui-bootstrap-tpls.js. Try to modify directive for accordion-heading.

Answer 3

I ran into the same issue trying to conditionally apply a background color to the heading with ng-class. This is a bit of a workaround, but it does the trick.

First we need to remove the padding from the heading. If you inspect it, you'll see that it generates a div with a .panel-heading class and a padding: 10px 15px (see note below). The padding is what causes issues when trying to apply a background to a nested div, so lets remove it.

.panel-heading {
    padding: 0;
}

Now we can add our nested div and give it the same padding to get back our previous look.

<accordion-heading>
    <div class="myClass" style="padding: 10px 15px">My Heading {{$index}}  </div>
</accordion-heading>

Here's the updated jsfiddle

Note my code above is from a different version of ui-bootstrap. The classes were slightly different in this jsfiddle, so you will see a slightly different solution. The concept, however, is the same.