jquery - 変数に基づいてアコーディオンヘッダーの背景色を設定する

Question

UI.Bootstrap アコーディオン コントロールを使用する次の HTML があります。

<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

プロパティが trueの場合にクラスを設定し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;
}