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

如何通过单击按钮从内部关闭uib-accordion(How to close uib-accordion from inside with a button click)

我想点击按钮从里面关闭手风琴。 我试图将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; }

I would like to close accordion from inside with a button click. I am trying to set isOpen to false but it's not working. Is there any way to close it on button click? Thank you.

Plunker here: 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; }

最满意答案

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

I could able to achieve what I needed by slightly changing @MrNobody solution. https://plnkr.co/edit/cYb5jIi3LBslUDO8xfg4?p=preview

View:

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

Controller:

$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 = []; }