Angularjs 手风琴访问处于打开状态

问题描述 投票:0回答:2

有没有办法访问手风琴组是否打开?我知道有 isOpen 指令,但我不确定是否有办法在纯粹的 html 中访问它的状态。使用(和滥用?)两种方式绑定我可以设置一个变量来保存该状态,但如果不执行 isOpen0、isOpen1、isOpen2 等操作,它就无法用于嵌套手风琴。我还可以使用 ng-init 来“声明”嵌套手风琴范围上的新 isOpen 但这听起来不是一个好主意。

  <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

angularjs angular-ui angular-ui-bootstrap angular-bootstrap
2个回答
16
投票

首先,您必须使用父对象就像 Angular UI 文档的示例中那样,例如

status
对象:

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

然后,您可以完美地使用相同的对象name来嵌套手风琴。原因很简单:

accordion-group
指令将为每个组实例化一个新范围。这样,当某个
status.isOpen
发生变化时,不会影响其他组。

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


0
投票

您不需要创建对象。只需通过以下方式创建一个变量:

<li uib-accordion-group ng-init="isOpen=true" is-open="isOpen">
© www.soinside.com 2019 - 2024. All rights reserved.