Question

我想通过点击按钮从内部关闭手风琴。我正在尝试将isOpen设置为false，但它无效。有没有办法在按钮点击时关闭它？谢谢。

此处的Plunker：https://plnkr.co/edit/3xMnWRPOoEHPmguaQxd0?p=preview

<div uib-accordion-group is-open="isOpen" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
  {{group.content}}
  <button ng-click="close()">close this</button>
</div>

$scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];


  $scope.isOpen = false;

  $scope.close = function(){
    $scope.isOpen = false;
  }

Answer 1

我把isOpen放在集合中，为每个手风琴药片分别设置切换（分别打开每个药丸）并且它有效，检查下面的代码：

<强>控制器：

$scope.groups = [
{
  title: 'Dynamic Group Header - 1',
  content: 'Dynamic Group Body - 1',
  isOpen: false
},
{
  title: 'Dynamic Group Header - 2',
  content: 'Dynamic Group Body - 2',
  isOpen: false
}
];

$scope.items = ['Item 1', 'Item 2', 'Item 3'];

$scope.addItem = function() {
  var newItemNo = $scope.items.length + 1;
  $scope.items.push('Item ' + newItemNo);
};

$scope.close = function(group){
  group.isOpen = false;
};

查看：

<div uib-accordion-group is-open="group.isOpen" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> {{group.content}} <button ng-click="close(group)">close this</button> </div>

我修改了你的plunker： https://plnkr.co/edit/pBT0fbNJtQhgc5kZlLbO?p=preview

Answer 2

您可以在使用ng-init进行循环时使用isOpen分配新属性ng-repeat。更新了 https://github.com/NVentimiglia/WebSocket.Portable 。

更改模板而不在控制器中添加属性：

<div uib-accordion-group ng-init="group.isOpen=false" is-open="group.isOpen" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
  {{group.content}}
  <button ng-click="group.isOpen=false">close this</button>
</div>

修改

如果您不想改变现有对象，那么您可以使用数组isOpen来保持手风琴组的开放状态。的 Plunker code

<uib-accordion close-others="oneAtATime" ng-init="isOpen=[]"> <div uib-accordion-group ng-init="isOpen[$index]=false" is-open="isOpen[$index]" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> {{group.content}} <button ng-click="isOpen[$index]=false">close this</button> </div> </uib-accordion>

Answer 3

当您展示手风琴时，您必须将$scope.isOpen设置为true，然后$scope.isOpen = false将关闭手风琴。

编辑：有吸油烟机 https://plnkr.co/edit/RbbbwGaqGq8gG0JYseYw?p=preview

Answer 4

我可以通过稍微改变@MrNobody解决方案来实现我所需要的。 https://plnkr.co/edit/cYb5jIi3LBslUDO8xfg4?p=preview

查看：

<uib-accordion close-others="true"> <div uib-accordion-group is-open="isOpen[$index]" class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> {{group.content}} <button ng-click="close($index)">close this</button> </div> </uib-accordion> <button ng-click="closeFromOutside()">close from outside</button>

<强>控制器：

$scope.isOpen = []; $scope.groups = [ { title: 'Dynamic Group Header - 1', content: 'Dynamic Group Body - 1' }, { title: 'Dynamic Group Header - 2', content: 'Dynamic Group Body - 2' } ]; $scope.close = function(index){ $scope.isOpen[index] = false; } $scope.closeFromOutside = function(){ $scope.isOpen = []; }

如何通过单击按钮从内部关闭uib-accordion

4 个答案: