Angular based collapsible panel Demo, in dem ich ein verschachteltes reduzierbares Panel erstellen möchte

Ich möchte ein mehrstufiges reduzierbares Panel erstellen. In der Demo Wenn ich auf die übergeordnete zusammenklappbare Anzeige klicke, werden alle inneren zusammenklappbaren Bereiche geöffnet und umgekehrt.Angular based collapsible panel Demo, in dem ich ein verschachteltes reduzierbares Panel erstellen möchte

Meine Anforderung besteht darin, eine zusammenklappbare Anzeige mit untergeordneten zusammenklappbaren Anzeigefeldern mit demselben Codefluss zu verwenden. In dem, wenn ich auf übergeordnete zusammenklappbare Überschrift klicke, sollte es öffnen und seinen Inhalt zeigen, ohne Kind zusammenklappbare Panels zu öffnen. und so weiter, wenn ich auf innere zusammenklappbare Überschrift klicke, dann sollte es nur seinen eigenen Inhalt öffnen oder schließen, der nicht geschieht.

Wenn jemand weiß, schlagen Sie bitte Lösungen so schnell wie möglich vor.

[< 

!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

ich das Attribut entfernen versucht, [ist offen = „status.open“] von Eltern und Kind, das das Akkordeon Arbeit macht aber die Glyphe Symbole Schalen nicht.

Ich möchte diese Anforderung mit Symbolen erreichen richtig funktioniert ......

Quelle

2016-04-21 Yogesh Sandhokar

Versuchen Sie, das Kind-Element in Ihrem plunkr mit diesem 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>

Quelle

2016-04-21 11:07:41

Grundsätzlich in unserem Code zu ersetzen, wir don Keine Kontrolle über das untergeordnete Bedienfeld, da die Implementierung wie das übergeordnete Bedienfeld über das untergeordnete Bedienfeld dupliziert wird und dynamisch erstellt wird. Daher können wir das Layout des untergeordneten Bedienfelds nicht ändern. Also, wenn Sie uns mit einem anderen Beispielcode helfen könnten. –

Angular based collapsible panel Demo, in dem ich ein verschachteltes reduzierbares Panel erstellen möchte

Antwort

Verwandte Themen