Victor Leung
Victor Leung
BlogAI SolutionAlphaAlgoFlower shopFX CombineIEESushi ClassifierWealth Agile

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☺

About Victor Leung

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

Continuous improvement

Copyright © 2023.