Angular UI bootstrap: Open first accordion with ng-repeat

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☺

Originally published at on December 24, 2014.

By Victor Leung

Experience in software development, consulting services and technical product management. Understanding of business and technology with an MBA in Finance and a Master degree in Computer Science. AWS Certified Solution Architect with experience in building products from scratch and serving as a charismatic leader.

Leave a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: