0

I have the following HTML that uses the UI.Bootstrap accordion control

<accordion-group ng-repeat="kvp in jobTemplate.jobMasterConfigGroups[$index].jobMasterConfigs" is-open="kvp.active">
                                        <accordion-heading>
                                            <i class="fa" ng-class="{'fa-minus': kvp.active, 'fa-plus': !kvp.active}"></i>
                                            <span>Key: <strong>{{kvp.key | cut:false:15}}</strong> Value: <strong>{{kvp.value | cut:false:50}}</strong></span>
                                        </accordion-heading>
....

What I want is for the accordion-heading to be a different colour (the entire heading bar background) if kvp.IsOverridden == true

I'm not sure of the best way to do this, can anyone suggest?

NZJames
  • 4,963
  • 15
  • 50
  • 100

1 Answers1

0

You can set a class on the accordion-group when the property is true, and add a CSS rule to style the header of a group with that class:

JS:

<accordion-group ng-repeat="kvp in jobTemplate.jobMasterConfigGroups[$index].jobMasterConfigs" is-open="kvp.active" ng-class="{'overridden': kvp.IsOverridden}">
    <accordion-heading>
        <i class="fa" ng-class="{'fa-minus': kvp.active, 'fa-plus': !kvp.active}"></i>
        <span>Key: <strong>{{kvp.key | cut:false:15}}</strong> Value: <strong>{{kvp.value | cut:false:50}}</strong></span>
    </accordion-heading>
</accordion-group>

CSS:

.overridden .panel-heading {
    background-color: red;
}
bumpy
  • 2,002
  • 2
  • 14
  • 19
  • Cheers, thanks for the response. I have tried the above but I didn't see any visual change in the website. I changed the attribute on the accordion group to class="overridden" and they all turned red, so it is finding my style, but when I use ng-class="overridden" (even without the logic) it doesn't go red so it's not picking it up from ng-class – NZJames Sep 12 '16 at 08:58
  • Try to replace the 'kvp.IsOverridden' with 'true' and see if it works – bumpy Sep 12 '16 at 21:49