Add class to accordion heading using AngularJS ui-

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.

Answer 4

you could just apply your CSS to an outer div like this:

HTML:

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

            </div>

            <div class="accordion-inner">asdf asdf asdf</div>
        </div>
    </div>
</div>

CSS:

.myClass {
    background-color: gray;
    color: black;
}

.accordion-inner {
    background-color: green;
    color: black; 
}

JS:

angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function ($scope) {
    $scope.items = [{}, {}, {}, {}];
});

then, change it to use ng-class and it should work just fine

pd: (Sorry about the bad english)