Question

问题发布here（我需要自动关闭内部手风琴，当我关闭外部/家长手风琴时）直到现在才回答。任何人都可以帮我解决上述问题。 ..提前谢谢你......

“点击此处查看plunker demo ”

<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

您可以通过跟踪所选组来解决此问题。在这个例子中，我添加了一个名为handler的自定义html标签（你可以添加另一个，我只是做了它）来包装手风琴组并确保处理程序标签在点击之前点击指令点击事件。

首先，将这些添加到范围

$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

Answer 2

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

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

而不是旧的：

 <accordion-group  heading="Nested Accordian">

然后定义一个对象来处理静态子手风琴的状态：

  $scope.staticAccordionsFlag = {
    open : false
  };

然后更改组以使动态子项具有额外属性：

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

  }

最后调整儿童手风琴以使链接的动态标志打开或不打开：

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

  }

}

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

2 个答案: