Öffnen Sie ein einzelnes Akkordeon in Angular.js

Question

Ich habe ein Problem, ich erzeuge mehrere Akkordeons dynamisch. Aber mein Problem ist, dass alle öffnen, wenn sie versuchen, eins zu öffnen. Wie kann ich das lösen?

https://plnkr.co/edit/BQ4yQkEtiDrnhISozlOe?p=preview

<div ng-repeat="faq in faqs"> 
<div uib-accordion-group class="panel-default" is-open="status.open"> 
    <uib-accordion-heading> 
    {{faq.pregunta}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
    </uib-accordion-heading> 
    {{faq.respuesta}} 
</div> 

$scope.faqs=[ 
{"pregunta": "pregunta1", "respuesta": "respuesta1"}, 
{"pregunta": "pregunta2", "respuesta": "respuesta2"}, 
{"pregunta": "pregunta3", "respuesta": "respuesta3"} 
] 

Answer 1

Das Problem ist, dass is-open="status.open" alle auf den gleichen Booleschen Wert in Ihrem $scope.status Objekt gebunden ist. Sie müssen stattdessen eine Eigenschaft hinzufügen, wie open zu jedem Ihrer $scope.faqs Kollektionsteilen um anzuzeigen, welche einzelne uib-accordion-group auf einmal offen sein sollten:

$scope.faqs=[ 
    {"pregunta": "pregunta1", "respuesta": "respuesta1", "open": true }, 
    {"pregunta": "pregunta2", "respuesta": "respuesta2", "open": false}, 
    {"pregunta": "pregunta3", "respuesta": "respuesta3", "open": false} 
]; 

Dann würden Sie die entsprechenden faq innerhalb des Ziel müssen ng-repeat:

<div ng-repeat="faq in faqs"> 
    <div uib-accordion-group class="panel-default" is-open="faq.open"> 
     <uib-accordion-heading> 
      {{faq.pregunta}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i> 
     </uib-accordion-heading> 
     {{faq.respuesta}} 
    </div> 
</div> 

Sie auch die faq.open im ng-repeat mit ng-class Erklärungen für die Chevrons verwenden können.

Hier ist eine plunker die Funktionalität

Hoffentlich demonstriert, das hilft!