Open angular-ui-bootstrap accordion based on ID

Question

I have an accordion:

<accordion>
 <accordion-group  ng-repeat="group in groups" heading="{{group.title}}" id="{{group.id}}" is-open="group.open">
   <table class="table">            
       <tr>
         <td>{{group.definition}}</td>
       </tr>
    </table>
 </accordion-group>
</accordion>

and each accordion has a unique ID.

I know how to open an accordion based on its position:

 <button ng-click="groups[0].open = !groups[0].open">Toggle Title 1 based on index</button>

but how do I open an accordion based on its ID?

My current attempt is here: http://plnkr.co/edit/c3GeaWfOgZ2YoQb2kUbW

@Phil, how can I bind an ID (or something unique) to is-open? I'm looking for something like:is-open="{{group.id}}.open" — rlsaj
– rlsaj, Commented Mar 26, 2015 at 23:45
I'd use a map or something, eg $scope.openGroups = {} and is-open="openGroups[group.id]" — Phil
– Phil, Commented Mar 27, 2015 at 0:13

Phil · Accepted Answer · 2015-03-27 00:22:23Z

2

Following on from my comment, try something like this...

In your controller, create a map to store open group information

$scope.accordionGroups = {};

If you want one group to default open, try this

$scope.accordionGroups[groups[0].id] = true;

Then use this in your template

<accordion-group ng-repeat="group in groups"
    heading="{{group.title}}" id="{{group.id}}"
    is-open="accordionGroups[group.id]">

To toggle a group with your button, use this

<button ng-click="accordionGroups.title1 = !accordionGroups.title1">Toggle title1</button>

Plunker

answered Mar 27, 2015 at 0:22

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

@rlsaj another option would have been to create a controller function to search for the group by ID in the array and set its open property to true but I feel like this is simpler

Collectives™ on Stack Overflow

Open angular-ui-bootstrap accordion based on ID

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related