Angular UI bootstrap: Open first accordion with ng-repeat

February 20, 2015

The problem:

I was using accordion directive in Angular UI Bootstrap 0.1.2. Reading the demo page, there is an example to show how to open the first-accordion-group by default:

    <accordion-group heading="First Header" is-open="true"> </accordion-group>

This works fine for static content, but it fails to work with dynamic content using ng-repeat. In other words, it DOES NOT simply 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 follow:

    <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 accordian to be closed by default.

Let me know if it doesn’t work for you☺

Profile picture

Experience in software development, application architecture, and deploying cloud solutions for enterprise customers. Strong hands-on skills with a Master's degree in Computer Science and business acumen with a master of business administration (MBA) in Finance. Certified in Amazon Web Services (AWS), Google Cloud Platform (GCP), Microsoft Azure, Kubernetes (CKA, CKAD, CKS, KCNA) and Scrum (PSM, PSPO) with experience in building banking products from scratch. Connect on Linkedin

© 2022, @victorleungtw