CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
simple
simple

Reputation: 2397

UI Bootstrap accordion - down arrow inside ng-repeat

I want my arrow to point down when the accordion is open. When I use ng-repeat is-open="status.open" is applied to every accordion. This creates an issue where is-open="status.open" is applied to all accordions. I need each accordion to have a unique value. EG: open1, open2, open3

How do I get my ng-repeat to add a unique value for each accordion?

Plunker: 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>

Upvotes: 1

Views: 3695

Answers (1)

Rishabh
Rishabh

Reputation: 900

You are using the same status variable (status.open) for open/close status of all the accordion groups. So if one is open, others will also open because the status is same. To solve this, make the status variable part of the ng-repeat object property.

<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.

Or, as Laloutre suggested in comments, you can use is-open="status.open[$index]", if you don't want the status variable as ng-repeat object property.

Upvotes: 2

Related Questions