2016-07-04 42 views
0

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

模态(尝试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() { 

    }); 
}; 
... 

enter image description here

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

回答

0

我复选框值保存到localStorage的。 并在控制器中检查是否存在我的localStorage属性。这里是我的3个复选框的例子。

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

之后,我只是在html中使用'ng-checked'。

相关问题