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

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

最佳答案

您可以使用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>

09-09 23:32
查看更多