How To Retain The Last Opened Accordion In A Group By Invoking Function In Is-open Attribute

I'm having accordion which is populated dynamically.

Solution 1:

You cannot really do that because angular is looking for a 2-way binding variable that it can assign to. You can easily maintain the last opened by using track by in your ng-repeat. With that what happens is angular will not recreate the DOM element, instead it will just update the existing element's scope which it identify based on what you are tracking by.

Here in the example i have an id for accordions so i am tracking it by id:-

<accordion-group ng-repeat="data in dataList  track by data.id"is-open="isOpen">

Plnkr

By default if no track by provided angular will add a unique id $$hashKey for the repeated elements and since you are refreshing as a whole list it will remove the elements from DOM and recreate them. Using track by you will get better performance improvement as well. You can provide any unique key as trackby value (event dataName if it is unique).

In this example you can see that the last accordion is retained opened even if you refresh the data since the isOpen is added on the child scope of repeated element even if you refresh the data if will only update the data based on the id, it wont recreate the accordion.

Share