AngularJS Accordion 全部展开 全部折叠

Question

我试图让 Accordion 通过指令 ng-click 正确切换。如果我打开第一项，如何让它展开所有 Accordion ？第二项和第三项将继续扩展和折叠，但第一项保持停滞。

Plunker

Answer 1

或者，您可以调整按钮，以便它们在子项中循环。

html:

<div ng-controller="AccordionDemo">
  <div >
      <div class="stuff_in_the_middle" >
          <div ng-repeat="m in results" ng-click="m.open = !m.open" style="margin-bottom:20px">
            <div heading="{{m.label}}" is-open="m.open" style="background-color:#d2d2d2; cursor:pointer" > 
            {{m.label}}
            </div>
            <div ng-show="m.open" style="padding:10px">
              contents
            </div>
          </div>
          <span class="btn btn-default"  ng-click="toggle(false)">Collapse All</span>
          <span class="btn btn-default"  ng-click="toggle(true)">Expand All</span>
      </div>
      <hr />
  </div>
</div>

JS:

var module = angular.module('plunker', []);

module.controller('AccordionDemo', ['$scope', 
  function ($scope) {
    $scope.results = [
      {label: 'Item 1', open: false},
      {label: 'Item 2', open: false},
      {label: 'Item 3', open: false}
    ];

    $scope.toggle = function(state) {
      $scope.results.forEach(function(e) {
        e.open = state;
      });
    }
  }
]);

在这里查看它的工作情况:http://plnkr.co/edit/T6iv7mSoat9SQBwSIFJP