Реализация кнопки "развернуть все" в пользовательском интерфейсе Bootstrap

Question

Я использую директиву UIB-аккордеон и хочу добавить кнопку, чтобы развернуть / закрыть все элементы в аккордеоне. Мой код такой:

<uib-accordion close-others="false">
    <div align="right">
      <a href="" ng-click="showFunc = !showFunc"> {{ showFunc ? "Hide all" : "Show all" }} </a>
    </div>
    <uib-accordion-group is-open="showFunc" ng-repeat="fun in functions" heading="{{ fun.name }}" is-disabled="!fun.show">
    </uib-accordion-group>

Что происходит, когда я нажимаю кнопку "развернуть все", это работает, поскольку вы не нажимаете каждую панель по отдельности, что создает переменную showFunc внутри области видимости и директива is-show получает ее оттуда.

Как это можно сделать? Я использую угловой 1.6.2

Благодарю.

Answer 1

Я думаю, что вы смешиваете разные переменные в разных контекстах (каждая итерация ngRepeat создает разные контексты, и вы по ошибке (?) Назначаете каждой разные переменные showFunc) и создаете беспорядок.

Что вы можете сделать, это назначить переменную, которая будет глобальной для аккордеона, переключить ее на нажатие кнопки, а затем назначить все is-open свойства объекта к этому значению, я связываю open свойство каждого объекта, чтобы я мог легко пройти объекты и получить к нему доступ.

HTML

<div uib-accordion-group is-open="fun.open" ng-repeat="fun in funcs" class="panel-default"
     heading="{{ fun.name }}">
  {{fun.name}}
</div>

JS

$scope.allOpen = false; // all are closed

// call this function on button click
$scope.openAll = function() {
    $scope.allOpen = !$scope.allOpen; // toggle here 

    $scope.funcs.forEach((f) => {
        f.open = $scope.allOpen;
    });
}; 

Использование forEach для простоты

Демо плункер