AngularJS Accordion Expand All Collapse All

Question

I'm trying to get harmonica to switch correctly through the ng-click directive. If I have item 1, how can I expand it to expand all accordions? Paragraph 2 and paragraph 3 will continue to expand and collapse, but paragraph 1 remains stagnant.

Plunker

Answer 1

alternately, you can customize your buttons so that they simply scroll through the children.

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;
      });
    }
  }
]);

see here: http://plnkr.co/edit/T6iv7mSoat9SQBwSIFJP

Answer 2

. - ng-click , - .

ng-repeat, , ( , plunker opened), .

setter, . , : http://plnkr.co/edit/h3MtKywiOaIQhpnAzWLT?p=preview