Angular UI Bootstrap 手风琴添加 Class 到 header

Question

我有以下手风琴，工作正常

<accordion-group is-open="open.first">
        <accordion-heading>
          My Title
        </accordion-heading>
</accordion-group>

"Accordion-heading" 指令翻译成类似于

    <h4 class="panel-title">
    <a class="accordion-toggle" 
accordion-transclude="heading" ng-click="toggleOpen()" href="">
My Title
    </h4>

我想要的是当有人点击这个手风琴时 option/title 是在 h4 属性上添加一个 class 来切换。在 jquery 我会这样做

$('.panel-heading .panel-title').on('click', function () {   
    $(this).toggleClass('actives'); 
 });

我想我必须按照指令去做，但不太确定怎么做？

Answer 1

假设您在 <accordion-group> 指令中使用 ng-repeat，您可以这样做：

<accordion-group ng-repeat="group in groups" ng-init="group.isOpen = false" ng-class="{'open': group.isOpen}" is-open="group.isOpen">

这会在 ng-init 中初始化一个名为 isOpen 的新 $scope 变量，它附加到您正在重复的单个组 (group.isOpen)。在我上面的示例中，我将其设置为 false，以便所有手风琴组在加载时关闭，然后将该变量分配给 is-open。当您单击或 "open" 手风琴组之一时，该指令将自动将 group.isOpen 更改为 true。然后，这将允许 ng-class 表达式也计算 true，并将 class "open" 添加到 DOM 中的 panel-heading。

Angular UI Bootstrap 手风琴添加 Class 到 header

Angular UI Bootstrap Accordion Adding a Class to header

javascript

accordion

twitter-bootstrap

angularjs