Question

我试图让手风琴通过指令ng-click正确切换。如果我有一个项目打开怎么能让它扩展所有的手风琴？第二项和第三项将继续扩大和崩溃，但第一项仍然停滞不前。

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

Answer 2

您的范围有问题。简单的规则是永远不要在ng-click或类似的指令中设置变量值，如果你要在父语外使用这个变量。

它是由ng-repeat引起的，它会创建范围，如果您尝试在其中定义新变量（您正在这样做，因为您使用了名称plunker，而不是{{1 }} ），它将仅定义为重复的当前项目。

您可以使用setter函数将其设置为正确的范围。所以，我们走了：http://plnkr.co/edit/h3MtKywiOaIQhpnAzWLT?p=preview

AngularJS手风琴全部展开全部折叠

2 个答案: