Question

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

.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指令一样工作，但是我似乎无法将类应用于accordion-header，所以我猜我没有定义正确的CSS或者我试图在错误的级别覆盖它。所有的手风琴东西似乎都在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>

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

1 个答案: