javascript - 记住模式中选中的复选框

Question

这就是我需要的场景。当我打开模式框并选中一些复选框时，下次打开时我希望从第一次开始就选中复选框。下面是我的代码。

主控模态功能

  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());
            });
        }

模态 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;
    }

** 模态视图主体**

    <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>

Answer 1

我建议将复选框的状态存储在本地存储中。这个模块看起来非常可靠:https://github.com/grevory/angular-local-storage

您需要通过 setStorageType() 在该模块中配置 session 存储选项，因为 session 存储仅对 session 而言是持久的，而本地存储是持久的，直到您清除该 session 的浏览数据为止页。

或者，您可以直接访问 sessionStorage() API:https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

这有一个很好的方法，可以使用已添加到 Angular 范围中的模态来预填充输入:Angular js init ng-model from default values

不要使用文本值，而是使用 bool 值来设置 ng-checked 属性，这样您就可以开始工作了。

如果有问题请评论。