页面重新加载后检索选定的复选框值答案

【问题标题】：Retrieving selected checkbox value after page reload页面重新加载后检索选定的复选框值
【发布时间】：2016-07-05 02:24:31
【问题描述】：

我正在尝试使用 cookie 来隐藏和显示表中的列，而不是将选定的复选框值存储在数据库中。我遇到的问题是，当用户再次启动模式时，我无法显示先前选择的复选框值。我正在尝试使用 ng-init 来取回该值并将复选框设置为 true 如果已被选中。

模态（尝试 1）

<div class="modal-header">
    <h3 class="modal-title">Additional Collections Columns</h3>
</div>
<div class="modal-body">
    <h4>Select addional columns from the list below to display in 'Collections' list</h4><br/>

    <div class="row">
    <form name="collectionsColumnsForm">
        <div class="col-sm-6">
            <ul>
                ...
                <li>
                    <label class="control c control--checkbox">
                        <input type="checkbox" name="phone" ng-model="columns.coll_phone" value="1" ng-init="columns={coll_phone:'{{cookie_coll_phone}}'}">
                        Phone
                        <div class="control__indicator"></div>
                    </label>
                </li>
                ...
            </ul>
        </div>
        </form>
    </div>
    <br>
</div>

<div class="modal-footer">
    <button class="btn btn-danger" type="button" ng-click="cancel()">Cancel</button>
    <button class="btn btn-info" type="button" ng-click="save()">Save</button>
</div>

模态（尝试 2）

<div class="modal-header">
    <h3 class="modal-title">Additional Collections Columns</h3>
</div>
<div class="modal-body">
    <h4>Select addional columns from the list below to display in 'Collections' list</h4><br/>

    <div class="row">
    <form name="collectionsColumnsForm">
        <div class="col-sm-6">
            <ul>
                ...
                <li>
                    <label class="control c control--checkbox">
                        <input type="checkbox" name="phone" ng-model="columns.coll_phone" value="1" ng-init="columns={columns.coll_phone:'{{cookie_coll_phone}}'}">
                        Phone
                        <div class="control__indicator"></div>
                    </label>
                </li>
                ...
            </ul>
        </div>
        </form>
    </div>
    <br>
</div>

<div class="modal-footer">
    <button class="btn btn-danger" type="button" ng-click="cancel()">Cancel</button>
    <button class="btn btn-info" type="button" ng-click="save()">Save</button>
</div>

模态（尝试 3）

<div class="modal-header">
    <h3 class="modal-title">Additional Collections Columns</h3>
</div>
<div class="modal-body">
    <h4>Select addional columns from the list below to display in 'Collections' list</h4><br/>

    <div class="row">
    <form name="collectionsColumnsForm">
        <div class="col-sm-6">
            <ul>
                ...
                <li>
                    <label class="control c control--checkbox">
                        <input type="checkbox" name="phone" ng-model="columns.coll_phone" value="1" ng-init="columns=cookie_coll_phone">
                        Phone
                        <div class="control__indicator"></div>
                    </label>
                </li>
                ...
            </ul>
        </div>
        </form>
    </div>
    <br>
</div>

<div class="modal-footer">
    <button class="btn btn-danger" type="button" ng-click="cancel()">Cancel</button>
    <button class="btn btn-info" type="button" ng-click="save()">Save</button>
</div>

在上面的代码中，用户可以选择他们可用的 3 个选项中的任何一个。一旦用户选择了一个或多个复选框，该值就会传递给 angularjs 控制器，然后在 cookie 中设置它。每当我签入浏览器工具或视图本身时，我从 cookie 中获取的值都是 true。

Angularjs 控制器

...

// stored cookie columns for collections table
...
$scope.cookie_coll_phone = $cookies.get('coll_phone');
...

// add more columns to collections list
$scope.collectionColumns = function() {

    var modalInstance = $uibModal.open({
       animation: true,
       templateUrl: '/js/modals/collection-columns.html',
        size: 'md',
       resolve:{
       },
      controller: function ($scope,$uibModalInstance) {

        ...
        $scope.cookie_coll_phone = $cookies.get('coll_phone');
        ...


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

        $scope.save = function() {

            ...
            $cookies.put('coll_phone', $scope.columns.coll_phone);
            ...

            toaster.pop('success', 'Success!', 'Additional column(s) have been added.');
            location.assign('/collections');
            $uibModalInstance.close();
        };

      }
   });

    modalInstance.result.then(function (data) {

    },function () {

    });
};
...

对于这个问题的任何帮助将不胜感激

【问题讨论】：

标签： angularjs cookies checkbox

【解决方案1】：

我正在将复选框值保存到 localStorage。在控制器中只是检查我的 localStorage 属性是否存在。这是我的 3 个复选框的示例。

vm.checkedCheckBoxes = window.localStorage.checkboxes ? JSON.parse(window.localStorage.checkboxes) : [false, false, false];

之后我只是在 html 中使用“ng-checked”。

【讨论】：