javascript - AngularJS UI - 如果存在多个 div，则单击按钮会折叠单个 div

Question

假设我有以下代码:

  <button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button1</button>
  <div id="collapse1" collapse="isCollapsed">
    <div class="well well-small">
      <p ng-bind-html="b2data"></p>
    </div>
  </div>

  <button class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">Button2</button>
  <div id="collapse2" collapse="isCollapsed">
    <div class="well well-small">
      <p ng-bind-html="b2data"></p>
    </div>
  </div>

如何单独折叠每个？ http://plnkr.co/edit/W26X4Iq8KrnY9cGsFvwA?p=preview

Answer 1

试试这个:- http://plnkr.co/edit/vPbihuL6JBE6qhwy4irP?p=preview

HTML:-

  <div ng-controller="AccordionDemoCtrl">

    <accordion-group heading="Static Header">
      <button class="btn btn-primary" ng-click="isCollapsed1= !isCollapsed1">Button1</button>
      <hr>
      <div id="collapse2" collapse="isCollapsed1">
        <div class="well well-small">
          <p ng-bind-html="b2data"></p>
        </div>
      </div>

      <button class="btn btn-primary" ng-click="isCollapsed2 = !isCollapsed2">Button2</button>
      <hr>
      <div id="collapse2" collapse="isCollapsed2">
        <div class="well well-small">
          <p ng-bind-html="b2data"></p>
        </div>
      </div>
    </accordion-group>

  </div>