Remember selected checkboxes in modal

Question

This is scenario that I need. When i open modal box and check some checkboxes, next time when I open i want to be selected checkboxes from first time. Below is my code.

Main Controller modal function

  function openModal() {
            vm.modalInstance = $uibModal.open({
                animation: true,
                size: 'lg',
                templateUrl: "/template.html",
                controller: 'ModalController as vm',
                resolve: {
                    refFY: function () {
                        return vm.refFY;
                    }
                }
            });

            vm.modalInstance .result.then(function (selectedItem) {
                $log.info('Modal ok-ed ', selectedItem);
                vm.fySelections = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        }

Modal controller

function ModalController($uibModalInstance, $log, refFY) {
        var fvm= this;
        fvm.refFY = refFY;
        fvm.fySelections = [];

        $log.info(fvm);

        function dismissFYSelectionModal() {
            $uibModalInstance.dismiss('cancel');
        }

        function confirmFYSelectionModal() {
            $log.debug(fvm.fySelections);
            $uibModalInstance.close(fvm.fySelections);
        }

        function selectAll() {
            fvm.fySelections = angular.copy(fvm.refFY);
        }

        function resetAll() {
            fvm.fySelections = [];
        }

        fiscalyearvm.dismissFYSelectionModal = dismissFYSelectionModal;
        fiscalyearvm.confirmFYSelectionModal = confirmFYSelectionModal;
        fiscalyearvm.selectAll = selectAll;
        fiscalyearvm.resetAll = resetAll;
    }

** modal view body**

    <div class="modal-body">
            <div class="panel">
                <div class="panel-body">
                    <div class="col-md-12" data-ng-repeat="fy in fvm.refFY" data-ng-show="fvm.refFY.length > 0">
                        <div class="ckbox ckbox-primary">
                            <label>
  <input type="checkbox" data-checklist-model="fvm.fySelections" data-checklist-value="fy">
                            {{fy.year}}
                        </label>
                    </div>
                </div>
            </div>
        </div>
</div>

Do you need the saved setting to persist after the session ends or can it reset with the session? — user2687646, Mar 23 '16 at 19:44
@user2687646 you have solution if i dont need after session ends? — Micko, Mar 23 '16 at 23:00
I have a solution either way, they just look a little different. Last question: Do you need it to work in older browsers like IE 9 and such? — user2687646, Mar 24 '16 at 16:05

score 0 · Answer 1 · edited May 23 '17 at 11:59

I would suggest storing the checkbox's states in local storage. This module looks pretty solid: https://github.com/grevory/angular-local-storage

You'll want to configure the session storage option in that module via the setStorageType() as session storage is only persistent for the session whereas local storage is persistent until you clear your browsing data for that page.

Alternatively you could access the sessionStorage() API directly: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

This has a good method for pre-filling inputs with a modal that's been added to your scope in angular: Angular js init ng-model from default values

Instead of using text values use Booleans to set the ng-checked attribute and you should be in business.

Comment if you have problems.

Remember selected checkboxes in modal

1 Answers1