2016-07-04 40 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'。

相關問題