展开许多手风琴组一次 [英] Expand many accordion groups at once

问题描述

我有以下的手风琴（使用角UI的引导）元素的分页循环中：

I have the following accordion (using angular-ui-bootstrap) inside a paginated loop of elements:

<div data-ng-repeat="m in results">
    <div class="stuff_in_the_middle">
        <accordion id="accordion_{{$index+((currentPage-1)*20)+1}}"  close-others="false">
            <accordion-group>
                [...stuff...]
            </accordion-group>
            <accordion-group>
                [...stuff...]
            </accordion-group>
            <accordion-group>
                [...stuff...]
            </accordion-group>
        </accordion>
        <span id="toggle_{{$index+((currentPage-1)*20)+1}}" onClick="openAllGroups">Toggle groups</span>
    </div>
</div>

我想知道如何为全部展开手风琴组元素一次与曲柄连杆的点击。这可能吗？

I would like to know how to expand all accordion-group elements at once with one click of the Toggle link. Is it possible?

推荐答案

您可以创建在手风琴组自己collapseall指令。在这个指令你可以从你的父母控制器且切换所有按钮设置就是isOpen范围的变量（由角UI创建）的值。

You could create your own collapseall directive on the accordion-groups. In this directive you can set the isOpen scope variable (created by angular-ui) to the value from your parent controller and your toggle all button.

编辑：演示在这里工作（的http：// plnkr.co/edit/JOOZek2QBSmxIj2pXCkK?p=$p$pview ）

JS

.controller('MyCtrl', ['$scope', function($scope) {
    $scope.opened = false;
}])

.directive('collapseall', [function() {
    return {
      restrict: 'A',
      scope: {
        collapseall: '='
      },
      link: function(scope, elem, attrs) {
        scope.$watch('collapseall', function(newval, oldval) {
          scope.isOpen = newval;
        })
      }
    }
  }
])

HTML

<div>
    <accordion close-others="false">
        <accordion-group heading="Item 001" collapseall="opened"> 
        </accordion-group>
        <accordion-group heading="Item 002" collapseall="opened">
        </accordion-group>
        <accordion-group heading="Item 003" collapseall="opened">
        </accordion-group>
    </accordion>
    <button class="btn" ng-click="opened=!opened">Toggle groups</button>
</div>

这篇关于展开许多手风琴组一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！