Angular UI Bootstrap Accordion向標題添加類

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>

我想要的是當有人單擊此手風琴選項/標題時添加的內容，以在h4屬性上切換類。 在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 。 當您單擊或“打開”手風琴組之一時，該指令將自動將group.isOpen更改為true 。 然后，這將使ng-class表達式也可以評估為true並將類“ open”添加到DOM中的面板標題。