Question

我有以下HTML使用UI.Bootstrap手风琴控件

<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

当属性为true时，您可以在accordion-group上设置一个类，并添加一个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;
}

基于变量设置accordion-header的背景颜色

1 个答案: