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

Posted 2023-03-05

【中文标题】如何捕捉角度 bootstrapUI 手风琴的切换事件

【英文标题】：How to catch the toggle event of angular bootstrapUI accordion

【发布时间】：2015-10-28 16:19:02

【问题描述】：

我正在研究 angular bootstrapUI 手风琴，我需要捕捉每个部分的切换事件，例如，在部分的每个标题中，我有一个箭头，当它打开时，向下箭头将显示，以及其他其他部分中的箭头将显示 arrow-right.something like this:

<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>

如您所见，如何为手风琴组中的每个部分切换 fa-chevron-down 和 fa-chevron-right 类？

【问题讨论】：

我不确定手风琴组 openEvent 的具体细节，但您可能正在寻找一个 ng 级三元示例 - <span ng-class="openEvent ? 'fa-chevron-down' : 'fa-chevron-up'"> - src: ***.com/questions/12008580/a-ternary-in-templates

感谢您的帮助。我知道 ng-class 是如何工作的，问题是我需要捕捉这个事件来告诉手风琴显示不同的箭头图片。

【参考方案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 :)

【讨论】：

谢谢！我真笨！刚从JQ搬过来，还在想JQ的方式，哈哈。

说句公道话，他们的手风琴文件真的很缺乏。我花了几分钟才明白is-open 的用途，因为它实际上是ng-model 类型属性。他们本可以给它取个更好的名字。