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

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, когда свойство истинно, и добавить правило 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; 
}