对angularjs中同一组手风琴的不同控制

时间:2015-10-29 10:03:18

标签: javascript html angularjs

我有2个angular-js手风琴,其中一个在另一个有效时被禁用 因此,当我点击一支手风琴时,它们都能正常工作 请查看此演示文稿:http://plnkr.co/edit/DMzLtN217F7g75LkbUMh?p=preview 我该怎么做才能分别控制它们?

这是HTML:

<div ng-controller="AccordionDemoCtrl">
    <accordion close-others="oneAtATime">
      <accordion-group is-open="status.open">
      <accordion-heading>
          I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </accordion-heading>
          This is just some content to illustrate fancy headings.
    </accordion-group>
    <accordion-group heading="Custom template" template-url="group-template.html">
  Hello
     </accordion-group>
    <accordion-group is-open="status.open">
       <accordion-heading>
           Delete <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
       </accordion-heading>
       <p>Please, to delete your account, click the button below</p>
       <button class="btn btn-danger">Delete</button>
    </accordion-group>
  </accordion>

1 个答案:

答案 0 :(得分:0)

您正在使用angular-ui-bootstrap并且未添加 ui-bootstrap.min.js 依赖项。

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>

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