UI Bootstrap 手风琴 - ng-repeat 内的向下箭头

Question

我希望手风琴打开时箭头指向下方。当我使用 ng-repeat 时，is-open="status.open" 应用于每个手风琴。这会产生一个问题，即 is-open="status.open" 应用于所有手风琴。我需要每个手风琴都具有独特的价值。 EG: open1, open2, open3

如何让我的 ng-repeat 为每个手风琴添加唯一值？

笨蛋: http://plnkr.co/edit/veFWTHuWIn2YpfgHqGMC?p=preview

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

Answer 1

您正在为所有手风琴组的 open/close 状态使用相同的状态变量 (status.open)。所以如果一个是打开的，其他人也会打开，因为状态相同。要解决这个问题，请将状态变量作为 ng-repeat 对象的一部分属性.

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

Here is the updated plunker.

或者，正如 Laloutre 在评论中建议的那样，如果您不希望状态变量作为 ng-repeat 对象属性.[=12=，您可以使用 is-open="status.open[$index]" ]

UI Bootstrap 手风琴 - ng-repeat 内的向下箭头

UI Bootstrap accordion - down arrow inside ng-repeat

javascript

angularjs

angular-ui-bootstrap