html - ng-class 未应用于 Accordion header

Question

我定义了一个类，它应该将 Accordion 控件的面板标题变为红色。该类定义如下

.overridden .panel-heading {
    background-color: red;
}

当我指定这个

<accordion-group ng-repeat="kvp in jobTemplate.jobMasterConfigGroups[$index].jobMasterConfigs" is-open="kvp.active" class="overridden">

所有行的标题背景都变成红色，所以它正在拾取类。但是当我这样做的时候

<accordion-group ng-repeat="kvp in jobTemplate.jobMasterConfigGroups[$index].jobMasterConfigs" is-open="kvp.active" ng-class="{'overridden': 1 == 1}">

它不会改变。我已将表达式硬编码为 1 == 1 以强制执行仅用于测试的真实评估(稍后我将使用变量)但甚至无法让它在硬编码的真实评估中显示红色。

知道为什么会发生这种情况吗？

更新:我试过了

 <accordion-group ng-repeat="kvp in jobTemplate.jobMasterConfigGroups[$index].jobMasterConfigs" is-open="kvp.active" ng-class="{'overridden': 1 == 1}">
                                        <accordion-heading ng-class="{'overridden': kvp.isOverridden}">
                                            <div ng-class="{'overridden': kvp.isOverridden}">
                                                <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>
                                            </div>
                                        </accordion-heading>

这使得背景变红，但只有文本的背景，而不是填充和整个 Accordion 标题背景。所以我已经证明我的 kvp.isOverridden 和 ng-class 指令一样有效，但是我似乎无法让该类应用于 accordion-header，所以我猜我没有定义正确的 CSS或者我试图在错误的级别覆盖它。所有 Accordion 的东西似乎都在 bootstrap.css 中，所以也许有另一种样式覆盖了我要设置的内容？我需要什么 CSS 和覆盖来覆盖 Accordion header 控件？

更新 2:以下内容覆盖了我网站中所有面板的背景并且有效，显然我只想在此代码块上有条件地覆盖它，但这确认这是我应用样式或不覆盖的方式问题是默认的

.panel-default >.panel-heading {
    background-color: #5bc0de;
}

Answer 1

您可以使用 accordion-heading 指令为标题提供自定义类

<accordion-group ng-repeat="kvp in jobTemplate.jobMasterConfigGroups[$index].jobMasterConfigs" 
 is-open="kvp.active">
    <accordion-heading>
        <i ng-class="{'overridden': 1 === 1}"></i> My Heading
    </accordion-heading>
    This is just some content to illustrate fancy headings.
</accordion-group>