Angular UI Bootstrap: Opening the First Accordion with ng-repeat

February 20, 2015

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

Profile picture

Software development professional with expertise in application architecture, cloud solutions deployment, and financial products development. Possess a Master's degree in Computer Science and an MBA in Finance. Highly skilled in AWS (Certified Solutions Architect, Developer and SysOps Administrator), GCP (Professional Cloud Architect), Microsoft Azure, Kubernetes(CKA, CKAD, CKS, KCNA), and Scrum(PSM, PSPO) methodologies. Happy to connect