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

您可以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;
}