记住模式中选中的复选框答案

【问题标题】：Remember selected checkboxes in modal记住模式中选中的复选框
【发布时间】：2016-07-11 06:38:38
【问题描述】：

这是我需要的场景。当我打开模态框并检查一些复选框时，下次打开时我想从第一次被选中复选框。下面是我的代码。

主控制器模态功能

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

模态控制器

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>

【问题讨论】：

您需要保存的设置在会话结束后保持不变还是可以随会话重置？
不，我不需要，它们可以重置
@user2687646 如果我在会话结束后不需要，你有解决方案吗？
我有一个解决方案，只是看起来有点不同。最后一个问题：您需要它在 IE 9 等旧浏览器中工作吗？
天哪，我才意识到你正在使用 Angular...对不起。

标签： javascript html angularjs checkbox modal-dialog

【解决方案1】：

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

您需要通过setStorageType() 在该模块中配置会话存储选项，因为会话存储仅对会话持久，而本地存储在您清除该页面的浏览数据之前是持久的。

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

这是一种很好的方法，可以使用已以角度添加到您的范围的模态预填充输入：Angular js init ng-model from default values

不要使用文本值，而是使用布尔值来设置ng-checked 属性，您应该在做生意。

如有问题请留言。

【讨论】：