如何通过单击按钮从内部关闭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 = []; }更多推荐
发布评论