基于 Angular 的可折叠面板演示，我想在其中创建一个嵌套的可折叠面板答案

【问题标题】：Angular based collapsible panel Demo in which I want to create a nested collapsible panel基于 Angular 的可折叠面板演示，我想在其中创建一个嵌套的可折叠面板
【发布时间】：2016-08-14 12:44:13
【问题描述】：

我想创建一个多级可折叠面板。在演示中，如果我点击父级可折叠面板，它会打开所有内部可折叠面板，反之亦然。

我的要求是有一个可折叠面板，其中包含具有相同代码流的子可折叠面板。如果我单击父可折叠标题，则它应该打开并显示其内容，而无需打开子可折叠面板。依此类推，如果我点击内部可折叠标题，那么它应该只打开或关闭它自己没有发生的内容。

如果有人知道，请尽快提出解决方案。

[<

!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">

    <uib-accordion-group is-open="status.open">
      <uib-accordion-heading>
       heading 1 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      content 1
       <uib-accordion-group is-open="status.open">
      <uib-accordion-heading>
       inner panel heading 1 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      inner panel content 1
    </uib-accordion-group>
    </uib-accordion-group>
  </uib-accordion>
</div>
  </body>
</html>

Plunker Collapsible Demo

我试图从使手风琴工作但字形图标没有切换的父子节点中删除属性 [is-open="status.open"]。

我想通过图标正常工作来实现这个要求......

【问题讨论】：

标签： angularjs twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

尝试用此代码替换 plunkr 中的子元素

      content 1
       <uib-accordion-group is-open="status.openChild">
      <uib-accordion-heading>
       inner panel heading 1 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.openChild, 'glyphicon-chevron-right': !status.openChild}"></i>
      </uib-accordion-heading>
      inner panel content 1
    </uib-accordion-group>

【讨论】：

基本上在我们的代码中，我们无法控制子面板，因为实现就像父面板复制在子面板上并且是动态创建的。所以我们不能改变子面板的布局。因此，如果您可以帮助我们提供一些其他示例代码。