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}
];

然后，您需要定位faq中的相应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>

您还可以使用ng-repeat中的faq.open和ng-class V形声明。

这是展示功能的plunker

希望这有帮助！

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

1 个答案: