Angularjs 如何在父级关闭时关闭嵌套ui引导accordion_Angularjs_Angular Ui Bootstrap

Angularjs 如何在父级关闭时关闭嵌套ui引导accordion

angularjs

Angularjs 如何在父级关闭时关闭嵌套ui引导accordion,angularjs,angular-ui-bootstrap,Angularjs,Angular Ui Bootstrap,发布的问题（当我关闭外部/父级手风琴时，我需要自动关闭内部手风琴）至今未得到回答。有人能帮我找到解决上述问题的方法吗。。提前非常感谢你 “单击此处查看” 此内容在模板中是直接的。 {{group.content} 此内容在模板中是直接的。 {{group.content} 首先在父项上添加一个手风琴标题，而不是标题属性，这样我们就可以像这样添加点击事件： <accordion-group > <accordion-heading>

发布的问题（当我关闭外部/父级手风琴时，我需要自动关闭内部手风琴）至今未得到回答。有人能帮我找到解决上述问题的方法吗。。提前非常感谢你

“单击此处查看”


此内容在模板中是直接的。
{{group.content}
此内容在模板中是直接的。
{{group.content}

首先在父项上添加一个手风琴标题，而不是标题属性，这样我们就可以像这样添加点击事件：

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

然后更改组，使其具有动态子对象的额外属性：

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

您可以通过跟踪选定的组来解决此问题。在本例中，我添加了一个名为handler的自定义html标记（您可以添加另一个，我刚刚制作好）来包装accordio组，并确保handler标记在指令click事件之前单击fire

首先，将这些添加到范围中

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


@ShaileshBhat np！更新投票/接受回答如果提供了帮助对不起，但对于最新的插件和不包括，我需要工作…但它不适用于这些条件（因为，我需要为包含最新版本ui引导的项目包括这些条件，而不包括已经完成的twitter引导）@Marcus HYes，我得到了以上问题的答案，谢谢…对不起，但是对于最新的插件，没有包括，我需要工作…但它不适用于这些条件（因为，我需要为包含最新版本的ui引导和没有已经完成的twitter引导的项目包括这些条件）是的，我得到了上述问题的答案，谢谢。。。。
  <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>

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

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;

  }

}

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

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