Получение выбранного значения флажка после перезагрузки страницы

Question

Я пытаюсь использовать файлы 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() { 

    }); 
}; 
... 

Любая помощь с этой проблемой было бы весьма признателен

Answer 1

Я спасаю значение флажков LocalStorage. И в контроллере просто проверяем, есть ли у меня свойство localStorage. вот пример с моими 3 флажками.

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

После этого я просто использую 'ng-checked' в html.