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

Question

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

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

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

NZJames 09 сен. 2016, в 18:16

Источник

Теги:

jquery

html

angularjs

css

ui.bootstrap

1 ответ

Ещё вопросы

bumpy · Answer 1 · 2016-09-09T14-31-00.000Z

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

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