6

我想使用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当我检查手风琴标题元素时，找不到该类。有什么原因我不能向手风琴标题添加类吗？

4

4 回答 4

2

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

<accordion-heading>
    <div class="myClass">My Heading {{$index}}</div>
</accordion-heading>
于 2013-09-14T21:49:05.790 回答
1

在 Angular UI Bootstrap 中，他们为accordion-heading. 这个模板是用ui-bootstrap-tpls.js. 尝试修改accordion-heading.

于 2013-11-25T13:17:48.487 回答
1

我遇到了同样的问题，试图有条件地将背景颜色应用于标题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 中的类略有不同，因此您将看到略有不同的解决方案。然而，这个概念是相同的。

于 2015-04-21T14:14:12.530 回答
0

你可以像这样将你的 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：（抱歉英语不好）

于 2016-04-28T17:34:18.353 回答