在Angular.js中打開單個手風琴

Question

我遇到了問題，我正在動態生成幾個手風琴。但我的問題是，當試圖打開一個，他們都打開。我該如何解決這個問題？

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

的問題是，is-open="status.open"是所有連接到相同的布爾值的$scope.status對象內。你需要，而不是添加這樣一個屬性作爲open到每個$scope.faqs藏品，表示個別uib-accordion-group應該是開放一次的：

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

然後，你需要針對內的各個faqng-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> 

您還可以使用NG重複內faq.open與ng-class聲明爲V形。

這裏是一個plunker展示功能

希望幫助！