How to set class/style of accordion heading in Angular UI

Question

I'm using Angular UI to render littel database entries in an accordion. In a first trial, I used bootstrap, but as I integrated AngularJS views, accordion is no more fully working (empty href...). I then replaced my bootstrap accordion with angular UI bootstrap one and the default template.

My problem is that in the bootstrap version, I managed to stylized the heading depending on the accordion title (I was using the ng-repeat directive, and the ng-style inside the heading). I tried to do the same with Angular UI, but even my custom class is not rendered.

This sample code was working great with bootstrap, but no more with ui.boostrap accordion :

accordion-group.accordion-groupLog(ng-repeat="item in data.entries | filter:search") 
   accordion-heading.accordion-headingLog(ng-style="{backgroundColor: styles[item.importance-1].bkcolor, color: styles[item.importance-1].color}")
         {{item.title}}   ({{item.importance}})

The goal here is to apply a different style (background color and text color) based on an item field. Furthermore, the class accordion-headingLog is to resize the accordion default size.

Here is the rendered code :

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search">
   <div class="accordion-heading">
      <a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
......

And I was expecting something like :

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search">
   <div ng-style="{backgroundColor: styles[item.importance-1].bkcolor}" class="accordion-heading accordion-headingLog" style="background-color: rgb(214, 24, 40);">

[EDIT] I tried to put the accordion-headingLog class with ng-class attribute, but it does not work either. Just to test, I tried to apply the class and the style inside the body of the accordion, and it works well. I conclue that the accordionHeading directive does not accept any class or attribute ? How to dynamically apply a style on the heading then ???

[EDIT] Another trial was to build my own template. I am able to apply the accordion-headingLog class to the heading, but how can I set a customizable style ? I tried to use ng-style and apply a fixed style, but it does not work.

script(type="text/ng-template", id="template/accordion/accordion-group.html").
    div.accordion-group
    div.accordion-heading.accordion-headingLog(ng-style="{background-color: #123456")
       a.accordion-toggle(ng-click="isOpen = !isOpen", accordion-transclude="heading") {{heading}}
    div.accordion-body(collapse="!isOpen")
       div.accordion-inner(ng-transclude)

Answer 1

Angular-UI's accordion has an accordionHeading directive that allows you to include HTML. The example in the source code:

// Use accordion-heading below an accordion-group to provide a heading containing HTML
// <accordion-group>
//   <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading>
// </accordion-group>

So maybe you can do something like this to conditionally apply your custom css:

<accordion-group>
<accordion-heading ng-class="{'custom-style': item.title }"> Your Title </accordion-heading>
</accordion-group>

Here is the Angular-UI Accordion source code https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

Answer 2

I had the same problem, the fast solution for me was change the CSS and add a class into the parent "accordion-group":

Template:

<accordion close-others="true">
    <accordion-group ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}">
        <accordion-heading ng-click="isopen=!isopen">
            {{ elem.name }} 
        </accordion-heading>
        This content is straight in the template.
    </accordion-group>
</accordion>

HTML:

<accordion close-others="true">
    <div class="panel-group" ng-transclude="">
        <!-- ngRepeat: elem in group.elements -->
        <div class="panel panel-default ng-isolate-scope collapsed" ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}">
            <div class="panel-heading">
                <h4 class="panel-title">
                <a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
                    <span class="ng-binding ng-scope"> 2001 </span></a>
                </h4>
            </div>
            <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
                <div class="panel-body" ng-transclude="">
                    <accordion-heading ng-click="isopen=!isopen" class="ng-scope"></accordion-heading>
                    <span class="ng-scope">
                        This content is straight in the template.
                    </span>
                </div>
            </div>
        </div>
    </div>
</accordion>

CSS:

accordion>.panel-group .panel.collapsed .panel-heading .accordion-toggle {
    color: #478fca;
    font-weight: 400;
    background-color: #F9F9F9;
}

You can create a directive to change the class of children as well, but I do not believe that is the best solution.