在 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 object 中的同一个布尔值相关联。您需要为每个 $scope.faqs collection 项添加一个属性，例如 open，以指示哪个 uib-accordion-group 应该同时打开:

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

然后您需要在 ng-repeat:

中定位相应的 faq

<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-repeat 中的 faq.open 与您的 ng-class 人字形声明一起使用。

这里是 plunker 演示功能

希望对您有所帮助！

在 Angular.js 中打开一个手风琴

Open a single accordion in Angular.js

angularjs

angular-ui-bootstrap