Question

我正在使用uib-accordion指令，我想添加一个按钮来展开/关闭手风琴中的所有元素。我的代码是这样的：

<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

Demo plunker

在Bootstrap UI手风琴中实现扩展全部按钮

1 个答案: