Angularjs手风琴访问是打开状态

时间:2014-12-15 16:47:31

标签: angularjs angular-ui angular-ui-bootstrap angular-bootstrap

有没有办法获取手风琴组是否开放?我知道isOpen指令,但我不确定是否有一种方法可以访问纯粹在html中的状态。使用(和滥用?)双向绑定我可以设置一个变量来保持该状态,但是如果不执行像isOpen0,isOpen1,isOpen2等那样的嵌套手风琴就不会有效。我也可以使用ng-init来&#34 ;声明"一个新的是打开嵌套手风琴的范围,但这听起来不是一个好主意。

  <accordion>
    <accordion-group is-open="isOpen">
      <accordion-heading>
         <div ng-class="{'myClass': isOpen}">Static Text</div>
      </accordion-heading>
      This content is straight in the template.
    </accordion-group>
  </accordion>

http://plnkr.co/edit/l5y4raei99pedNWcE225

1 个答案:

答案 0 :(得分:14)

首先,您必须使用父对象like in Angular UI's docs' examplestatus对象,例如:

  <div accordion-group="" ng-init="status = {isOpen: false}" is-open="status.isOpen">
      <div accordion-heading="">
          <div ng-class="{'is-open': status.isOpen}">NUTRIENT PROFILES</div>
      </div>
      ...
  </div>

然后,您可以完美地使用相同的对象名称来嵌套手风琴。原因很简单:accordion-group指令将为每个组实例化一个新范围。这样,当status.isOpen发生变化时,它就不会影响其他群组。

检查:http://plnkr.co/edit/nJ654pvE1itnGDQGp2rk?p=preview