Установка цвета фона для заголовка гармошки на основе переменной

Question

У меня есть следующий HTML-код, который использует аккордеонный элемент управления UI.Bootstrap

<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>
....

Я хочу, чтобы заголовок аккордеона был другого цвета (весь фон строки заголовка), если kvp.IsOverridden == true

Я не уверен, что лучший способ сделать это, кто-нибудь может предложить?

Answer 1

Вы можете установить класс на accordion-group когда свойство имеет значение true, и добавьте правило CSS для стилизации заголовка группы с этим классом:

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;
}