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

模态控制器

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()在该模块中配置会话存储选项，因为会话存储仅对会话保持不变，而本地存储是持久的，直到您清除该页面的浏览数据为止。< / p>

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

这有一个很好的方法可以预先填充输入，并且模式已经以角度添加到您的范围中：Angular js init ng-model from default values

使用布尔值来设置ng-checked属性，而不是使用文本值，而您应该开展业务。

如果您遇到问题请注意。

记住模态中选中的复选框

1 个答案: