Angular UI Bootstrap: Opening the First Accordion with ng-repeat
The Problem:
I was using the accordion directive in Angular UI Bootstrap version 0.1.2. On the demo page, there's an example showing how to open the first accordion group by default:
<accordion-group heading="First Header" is-open="true"> </accordion-group>
This works well for static content but fails to operate as expected with dynamic content generated using ng-repeat. In other words, it does not work like this:
<accordion-group
heading="{{group.title}}"
ng-repeat="group in groups"
is-open="true"
>
</accordion-group>
My Solution:
In the template, bind the is-open property of the accordion as follows:
<accordion-group
heading="{{group.title}}"
ng-repeat="group in groups"
is-open="status.isItemOpen[$index]"
>
</accordion-group>
And in the controller:
$scope.groups = ["First Header", "Second Header", "Third Header"]
$scope.status = {
isItemOpen: new Array($scope.groups.length),
isFirstDisabled: false,
}
$scope.status.isItemOpen[0] = true
Change the value of the last line to false if you prefer the first accordion to be closed by default.
Let me know if this doesn't work for you. 😊
