Question

我在分页的元素循环中有以下手风琴（使用 angular-ui-bootstrap ）：

<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>

我想知道如何一次展开所有accordion-group元素，只需点击一下Toggle链接即可。有可能吗？

Answer 1

您可以在accordion-groups上创建自己的collapseall指令。在此指令中，您可以将isOpen范围变量（由angular-ui创建）设置为父控制器的值和切换所有按钮。

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

<强> 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>

立刻扩大了许多手风琴乐队

1 个答案: