ng-class 未应用于手风琴标题答案

【问题标题】：ng-class not being applied to accordion headerng-class 未应用于手风琴标题
【发布时间】：2016-09-12 21:07:27
【问题描述】：

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

.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>

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

更新 2：以下内容覆盖了我网站中所有面板的背景并且可以正常工作，显然我只想有条件地在这一个代码块上覆盖它，但这证实了这是我应用样式或不覆盖的方式默认的就是问题

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

【问题讨论】：

标签： html css asp.net angularjs

【解决方案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>

【讨论】：