Question

我希望使用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。是否有某些原因我无法在手风琴标题中添加课程？

Answer 1

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

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

Answer 2

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

Answer 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中略有不同，所以你会看到一个稍微不同的解决方案。然而，这个概念是一样的。

Answer 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 :(抱歉英语不好）

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

4 个答案: