使用AngularJS ui-bootstrap将类添加到手风琴标题？答案

【问题标题】：Add class to accordion heading using AngularJS ui-bootstrap?使用AngularJS ui-bootstrap将类添加到手风琴标题？
【发布时间】：2013-09-19 07:30:39
【问题描述】：

我想使用ng-class 有条件地向accordion-heading 添加一个类，但似乎甚至没有在元素上显式设置一个类得到保留。我有这个：

<div accordion close-others="true">
    <div ng-repeat="currItem in items" accordion-group>
        <div accordion-heading class="myClass">My Heading {{$index}}</div>
        <div class="accordion-inner myClass">asdf asdf asdf</div>
    </div>
</div>

还有小提琴：http://jsfiddle.net/Zmhx5/1/

当我检查手风琴标题元素时，找不到 myClass 类。是否有某些原因我不能向手风琴标题添加类？

【问题讨论】：

标签： angularjs accordion angular-ui angular-ui-bootstrap

【解决方案1】：

您可以将 CSS 放在指令 accordion-heading 标签内：

<accordion-heading>
    <div class="myClass">My Heading {{$index}}</div>
</accordion-heading>

【讨论】：

问题在于我要添加的类是在标题上设置灰色背景色，使其具有禁用类型的外观。如果我在accordion-heading 内的元素上执行此操作，则不会为整个标题设置背景颜色，并且看起来不太好。见jsfiddle.net/Zmhx5/3

【解决方案2】：

在 Angular UI Bootstrap 中，他们为 accordion-heading 创建了一个指令。这个模板写在ui-bootstrap-tpls.js。尝试修改accordion-heading的指令。

【讨论】：

【解决方案3】：

我在尝试使用ng-class 有条件地将背景颜色应用于标题时遇到了同样的问题。这是一种解决方法，但它确实有效。

首先我们需要从标题中删除填充。如果你检查它，你会看到它生成了一个 div 和一个 .panel-heading 类和一个 padding: 10px 15px（见下面的注释）。填充是在尝试将背景应用到嵌套的 div 时导致问题的原因，因此让我们将其删除。

.panel-heading {
    padding: 0;
}

现在我们可以添加嵌套的div 并为其赋予相同的填充以恢复我们之前的外观。

<accordion-heading>
    <div class="myClass" style="padding: 10px 15px">My Heading {{$index}}  </div>
</accordion-heading>

这是更新后的jsfiddle

请注意，我上面的代码来自不同版本的 ui-bootstrap。此 jsfiddle 中的类略有不同，因此您将看到略有不同的解决方案。然而，概念是相同的。

【讨论】：

【解决方案4】：

您可以像这样将 CSS 应用到外部 div：

HTML：

<div ng-app="myApp" ng-controller="MyCtrl">
    <div accordion close-others="true">
        <div class="myClass" ng-repeat="currItem in items" accordion-group>
            <div accordion-heading>
                <div>My Heading {{$index}}</div>

            </div>

            <div class="accordion-inner">asdf asdf asdf</div>
        </div>
    </div>
</div>

CSS：

.myClass {
    background-color: gray;
    color: black;
}

.accordion-inner {
    background-color: green;
    color: black; 
}

JS：

angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function ($scope) {
    $scope.items = [{}, {}, {}, {}];
});

然后，将其更改为使用 ng-class，它应该可以正常工作

pd：（抱歉英语不好）

【讨论】：