当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - Angular based collapsible panel Demo in which I want to create a nested collapsible panel

问题描述:

I want to create a multilevel collapsible panel.

In the demo If I click on parent collapsible panel, it opens all inner collapsible panels and vice versa.

My requirement is to have a collapsible panel with child collapsible panels with the same code flow.

In which if I click on parent collapsible heading, then it should open and show its content without opening child collapsible panels.

and so on if I click on inner collapsible heading then it should only open or close its own content which is not happening.

If anyone knows please suggest solutions for this ASAP.

[<

!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

I tried to remove the attribute [is-open="status.open"] from both parent and child which is making the accordion work but the glyph icons aren't switching.

I want to achieve this requirement with icons working properly......

网友答案:

Try replacing the child element in your plunkr with this code

      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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: