2016-09-09 1 views
0

У меня есть следующий 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

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

ответ

0

Вы можете установить класс на 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; 
} 
+0

Приветствия, спасибо за ответ. Я пробовал выше, но я не видел никаких визуальных изменений на веб-сайте. Я изменил атрибут на группе аккордеона на class = "overridden", и все они стали красными, поэтому он находит мой стиль, но когда я использую ng-class = "overridden" (даже без логики), он не краснеет поэтому он не подбирает его из ng-класса. – NZJames

+0

Попробуйте заменить «kvp.IsOverridden» на «true» и посмотрите, работает ли он – bumpy