Angularjs控制手风琴的扩展和折叠

时间:2014-01-23 09:34:55

标签: angularjs angular-ui-bootstrap

我想了解如何在angularjs中使用ui.bootstrap手风琴。在我使用的情况下,我有三支手风琴,只允许第一支手风琴打开。当用户单击其标题直到从前一个手风琴中选择一个选项时,其余部分不应打开。

现在,我正在试验一个控制器,当用户点击第二个和第三个手风琴时会显示一条错误消息,然后关闭它们。这是我的Plunker和我的代码:

http://plnkr.co/edit/rSg6Az?p=preview

错误信息的部分工作正常,但我点击它时,我无法理解所选择的指南是否已关闭。

有什么想法吗?

问候:

Adrian Ferreres

3 个答案:

答案 0 :(得分:1)

首先,我感谢你的回答,并对我迟迟不予回答表示歉意。我没有测试你的解决方案,因为我找到了两个比你告诉我更喜欢的解决方案。第一个是由Vanya Dineva在Angular官方邮件组中提供的:

  

以下是您可以尝试的几件事:

     
      
  1. 请注意,accordionGroup指令在其模板中使用了collapse指令(https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-> group.html)   您可以修改而不是使用collapse =“!isOpen”,您可以将isOpen替换为您设置为false的新变量,直到满足条件为止

  2.   
  3. 请注意手风琴组模板(https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html)中的ng-click =“toggleOpen()”。尝试创建自定义功能,例如ng-click =“openIfConditionMet()”并将你的逻辑放在函数中

  4.   

第二个是我自己找到的。我添加了一个模态窗口,以在用户尝试打开手风琴时显示错误消息。在关闭窗口的函数中,我把代码放在关闭手风琴:

http://plnkr.co/edit/rSg6Az?p=preview

答案 1 :(得分:0)

您可以使用ng-class,并将其绑定到之前每个手风琴中的选项值。

答案 2 :(得分:0)

您可以将您的作业转换为$timeout,但已经掌握了对is-disabled的支持。 https://github.com/angular-ui/bootstrap/commit/9c43ae7c0a66ff454c97296122d8f82c89ac4d5e

您可以自己构建它或等待下一个版本: - )