当前位置: 首页 > 面试题库 >

处理Angular中的手风琴打开/折叠事件

那鹏
2023-03-14
问题内容

如果我有此代码:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
</accordion-group>

使用AngularJS,angular-ui和Twitter Bootstrap,是否可以使手风琴在打开时调用某些动作?我知道我不能简单地添加ng- click,因为在将其“编译”为HTML来打开/折叠该组之后,已经使用了它。


问题答案:

is-open手风琴组上有一个指向可绑定表达式的属性。当给定的手风琴组打开时,您可以观看此表达式并执行一些逻辑。使用此技术,您可以将标记更改为:

<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
   {{group.content}}
</accordion-group>

这样您就可以在控制器中准备所需的监视表达式:

$scope.$watch('groups[0].open', function(isOpen){
    if (isOpen) {
      console.log('First group was opened'); 
    }    
  });

尽管上述方法可行,但在实践中使用起来可能有点麻烦,因此,如果您认为可以改进此方法,请在https://github.com/angular-
ui/bootstrap中
打开一个问题



 类似资料:
  • 我正在使用href链接和可折叠标题制作手风琴菜单。问题是,当我单击子手风琴时,它会折叠父级。有什么解决方法吗? 这是更新的版本,它正在工作。解决方案是使用“”(如@Renan Arajo所述)并删除手风琴上的标题设置。 https://codepen.io/CocoSkin/pen/vRQyZP

  • 我尝试了以下代码,除了图标外,一切都很好。我试图在Google上找到一些解决方案,但我找不到我正在寻找的解决方案。 当我点击其中一个手风琴时,另一个手风琴应该折叠,当前点击的手风琴应该打开,同时fa图标应该根据手风琴的位置而改变。 这是我到目前为止已经尝试过的

  • 本文向大家介绍bootstrap手风琴折叠示例代码分享,包括了bootstrap手风琴折叠示例代码分享的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了bootstrap手风琴的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 手风琴布局Accordion Layout 通常,手风琴布局可以这样实现: <div class="accordion-list"> <div class="accordion-item"> <div class="accordion-item-toggle">...</div> <div class="accordion-item-content">...

  • 我有一个Angular 8应用程序,我正在使用PrimeNG 8。在我的一个组件中,我有多个手风琴,在那里我想在鼠标悬停事件上打开手风琴。请参阅此处的文档https://www.primefaces.org/primeng/#/accordion。 有谁能帮助一下如何在鼠标悬停上实现这一点。

  • 本文向大家介绍jQuery制作效果超棒的手风琴折叠菜单,包括了jQuery制作效果超棒的手风琴折叠菜单的使用技巧和注意事项,需要的朋友参考一下 拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进 演示图: main.js index.html style.css 以上所述就是本文给大家分享的全部内容了,希望能够对大家学习jQuery有所帮助。