如何关闭ub -手风琴从内部与一个按钮点击

How to close uib-accordion from inside with a button click

本文关键字：一个 按钮 ub 何关闭 手风琴 内部      更新时间：2023-09-26

我想通过单击按钮从内部关闭手风琴。我试图将isOpen设置为false，但它不起作用。有办法关闭它的按钮点击吗?谢谢你。

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放到集合中，让每个accordian药丸都有单独的切换(使每个药丸单独切换)，它工作了，检查下面的代码:

控制器: 

$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

您可以在与ng-repeat循环时使用ng-init来分配新的属性isOpen。更新Plunker代码。

在不添加控制器属性的情况下更改模板:

<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来保持手风琴组的打开状态。<<strong>恰好代码/strong>。

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

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

编辑:这是活塞https://plnkr.co/edit/RbbbwGaqGq8gG0JYseYw?p=preview

我可以通过稍微改变@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 = [];
  }
相关文章：