如何在父项关闭时关闭嵌套的 ui-bootstrap 手风琴

Question

发布的问题here（我需要自动关闭内部手风琴，当我关闭outer/Parent手风琴）到现在还没有得到解答。谁能帮我解决上述问题。 ..非常感谢您...

<div ng-controller="AccordionDemoCtrl"> 
  <accordion close-others="oneAtATime">
    <accordion-group heading="Static Header">
      This content is straight in the template.
    </accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </accordion-group>
    <accordion-group heading="Nested Accordian">
        <accordion close-others="oneAtATime">
          <accordion-group heading="Static Header">
            This content is straight in the template.
          </accordion-group>
          <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
            {{group.content}}
          </accordion-group>
        </accordion>
    </accordion-group>
  </accordion>

Answer 1

首先在 parent 上添加一个 accordion-heading 而不是标题属性，这样我们就可以像这样添加 on-click 事件：

 <accordion-group >
        <accordion-heading>
          <span  ng-click='onParentCollapse()'>Nested Accordian</span>
        </accordion-heading>

而不是旧的：

 <accordion-group  heading="Nested Accordian">

然后定义一个 object 来处理静态 child 手风琴的状态：

  $scope.staticAccordionsFlag = {
    open : false
  };

然后更改组以具有动态 childs 的额外属性：

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

然后在控制器中定义函数onParentCollapse:

  $scope.onParentCollapse = function(){

   //for the ones dynamicly generated 
   angular.forEach($scope.groups, function(element) {
      element.open = false;
    });

    //for the static ones
    $scope.staticAccordionsFlag.open = false;

  }

最后调整 child 手风琴以打开或关闭链接的动态标志：

  <accordion close-others="oneAtATime">
          <accordion-group is-open="staticAccordionsFlag.open" heading="Static Header">
            This content is straight in the template.
          </accordion-group>
          <accordion-group is-open="group.open" heading="{{group.title}}" ng-repeat="group in groups">
            {{group.content}}
          </accordion-group>

如果您迷路了，这里是您的完整代码： HTML :

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl"> 
  <accordion close-others="oneAtATime">
    <accordion-group heading="Static Header">
      This content is straight in the template.
    </accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </accordion-group>
    <accordion-group>
        <accordion-heading>
          <span  ng-click='onParentCollapse()'>Nested Accordian</span>
        </accordion-heading>
        <accordion close-others="oneAtATime">
          <accordion-group is-open="staticAccordionsFlag.open" heading="Static Header">
            This content is straight in the template.
          </accordion-group>
          <accordion-group is-open="group.open" heading="{{group.title}}" ng-repeat="group in groups">
            {{group.content}}
          </accordion-group>
        </accordion>
    </accordion-group>
  </accordion>
</div>

  </body>
</html>

和 JS：

function AccordionDemoCtrl($scope) {
  $scope.oneAtATime = true;

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



  $scope.staticAccordionsFlag = {
    open : false
  };

  $scope.onParentCollapse = function(){

   //for the ones dynamicly generated 
   angular.forEach($scope.groups, function(element) {
      element.open = false;
    });

    //for the static ones
    $scope.staticAccordionsFlag.open = false;

  }

}

Answer 2

您可以通过跟踪所选组来解决此问题。在这个例子中，我添加了一个名为 handler 的自定义 html 标签（你可以添加另一个，我刚刚编造的）来包装 accordion-groups 并确保 handler 标签 ng-click 在指令点击事件。

首先，将这些添加到范围

$scope.m = {};
  $scope.m.isSelected = '';
  $scope.m.set = function(value){
    $scope.m.isSelected = value; 
  };

然后在单击每个处理程序时调用 m.set

<div ng-controller="AccordionDemoCtrl"> 
  <accordion close-others="oneAtATime">
    <accordion-group heading="Static Header">
      This content is straight in the template.
    </accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </accordion-group>
    <accordion-group close-others="false">
      <accordion-heading><span ng-click="m.set('none')">Nested Accordian</span></accordion-heading>
        <accordion>
          <handler ng-click="m.set('Static')">
          <accordion-group is-open="m.isSelected == 'Static'">
            <accordion-heading><span >Static Header</span></accordion-heading>
            This content is straight in the template.
          </accordion-group>
          </handler>
          <handler ng-repeat="group in groups" ng-click="m.set(group.title)">
          <accordion-group is-open="m.isSelected == group.title">
           <accordion-heading><span>{{group.title}}</span></accordion-heading>
            {{group.content}}
          </accordion-group>
          </handler>
        </accordion>
    </accordion-group>
  </accordion>
</div>

Plunker here

如何在父项关闭时关闭嵌套的 ui-bootstrap 手风琴

How to close nested ui-bootstrap accordion when parent closes

angularjs

angular-ui-bootstrap