CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-bootstrap
paj28
paj28

Reputation: 2320

Angular UI Bootstrap: Make accordion save state

How can I make the accordion in Angular UI Boot strap save its state?

The behaviour I'd like is what a user clicks on a link inside the accordion, then later clicks back, the same groups are expanded as before.

If it helps, I'm using an SPA with ui-router, and I'm happy to save the state it a cookie.

I've not got very far because I haven't figured out how to read the accordion's state, let alone save it.

Upvotes: 2

Views: 569

Answers (1)

patrick
patrick

Reputation: 9742

Just like this:

<accordion>
    <accordion-group heading="Scrooge Mcduck" is-open="storage.mcduck" ng-click="select('mcduck')">
        Quack Wealthy!
    </accordion-group>
    <accordion-group heading="LaunchPad Mcduck" is-open="storage.launchpad" ng-click="select('launchpad')">
        Quack Pilot!
    </accordion-group>
</accordion>

controller

angular.module('myApp').controller('AccordionController', function ($scope, DuckStorage) {
  $scope.storage = DuckStorage;
  $scope.select  = function(duck) {
    DuckStorage[duck] = !DuckStorage[duck];
  }
});

service:

angular.module('MyApp').factory('DuckStorage', function () {
  return {};
});

Upvotes: 1

Related Questions