如何捕捉 angular bootstrapUI 手风琴的切换事件

Question

我正在开发 angular bootstrapUI 手风琴，我需要捕捉每个部分的切换事件，例如，在每个 header 部分中，我有一个箭头，当它是打开 arrow-down 会显示，其他部分的其他箭头会显示 arrow-right。像这样：

<accordion-group  is-open="true"  ng-repeat="destination in mileage.destionations">
            <accordion-heading>
                <span ng-class="{'fa-chevron-down': openEvent, 'fa-chevron-right': !openEvent">Toggle Me</span>
            </accordion-heading>
               <div class='accordion-section'>
                    Main content here
                </div>
        </accordion-group>

如您所见，如何为 accordion-group 中的每个部分切换 class fa-chevron-down 和 fa-chevron-right？

Answer 1

你真的很接近...

将您的 is-open 更改为属性名称，而不是值。否则你的看起来 is-open 总是打开的 (true)。

像这样：

<accordion-group  is-open="isOpen"  ng-repeat="destination in mileage.destionations">
     <accordion-heading>
          <span ng-class="{'fa-chevron-down': isOpen, 'fa-chevron-right': !isOpen">Toggle Me</span>
      </accordion-heading>
      <div class='accordion-section'>
           Main content here
      </div>
 </accordion-group>

现在，打开时 isOpen 将设置为 true。关闭时，它将设置为 false 并且图标切换将起作用。

isOpen 可以是任何你喜欢的。它只是一个 $scope 属性将被创建和设置。因此，您可以在 ng-class 中使用 is-open="iAmOpenNow" 并使用 iAmOpen :)

如何捕捉 angular bootstrapUI 手风琴的切换事件

How to catch the toggle event of angular bootstrapUI accordion

angularjs

angular-ui-bootstrap