Jquery/Angular根據存儲在本地存儲中的值顯示/隱藏列

Question

<div ng-controller="checkBoxController"> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p><label><input type="checkbox" id="name" />Name</label></p> 
      <p><label><input type="checkbox" id="age" />Age</label></p> 
      <p><label><input type="checkbox" id="gender" />Gender</label></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveSelectedColumn()">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 
<div class="panel"> 
    <button type="button" class="btn btn-default" ng-click="tableDataReset();">Reset</button> 
 <table class="table-condensed" id="employeeTable"> 
    <thead> 
     <tr> 
      <th class="name">Name</th> 
      <th class="age">Age</th> 
      <th class="gender">Gender</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="employee in employees"> 
      <td>{{employee.name}}</td> 
      <td>{{employee.age}}</td> 
      <td>{{employee.gender}}</td> 
     </tr> 
    </tbody> 
</table> 
    <a href="" title="Column Setting" data-toggle="modal" data-target="#myModal">Settings</a> 
</div> 
     </div> 



var myApp = angular.module('myApp', []); 
  
myApp.controller('checkBoxController', function ($scope) { 
  $scope.employees=[{name:'John', age:25, gender:'boy'}, 
       {name:'Jessie', age:30, gender:'girl'}]; 

    $scope.saveSelectedColumn = function(){ 
     $scope.selectCheckBox = []; 
     var $tbl = $("#employeeTable"); 
     var $tblhead = $("#employeeTable th"); 
     $("#myModal").find("input[type='checkbox']").each(function(index) { 
         //$scope.selectCheckBox = []; 
         var checked = $(this).is(":checked"); 
         if(checked) 
          $scope.selectCheckBox.push(1); 
         else 
          $scope.selectCheckBox.push(0); 

         var checked = $(this).is(":checked"); 
         var colToHide = $tblhead.filter("." + $(this).attr("id")); 
         var index = $(colToHide).index(); 
         if(checked) 
         $tbl.find('tr :nth-child(' + (index + 1) + ')').show(); 
         else 
          $tbl.find('tr :nth-child(' + (index + 1) + ')').hide(); 
        }); 
     localStorage.setItem("localData", JSON.stringify($scope.selectCheckBox)); 
    } 

    $scope.tableDataReset = function(){ 
     $scope.employees=[{name:'John', age:25, gender:'boy'}, 
       {name:'Jessie', age:30, gender:'girl'}]; 

     var getLocalStorageDate = localStorage.getItem("localData"); 
       var testData = JSON.parse(getLocalStorageDate); 
       if(testData != undefined && testData != null){ 
        //alert(testData.length); 

       } 
    } 


}); 

具有設置按鈕的列表數據，其中模式對話框打開。這種模式對話框包含的複選框等於表中的數字列。用戶選擇任何複選框&關閉按鈕，然後根據檢查的複選框（即只檢查列中在列表中可見的複選框）過濾表格。當用戶按下模式關閉按鈕我正在存儲狀態是0 & 1在陣列內localstorage（即1爲檢查& 0爲未選中）。有一個重置按鈕onclick，我填寫表後，但我想只顯示那些列取決於存儲在localstorage中的值爲0 & 1.我正在面對的問題，重置點擊復位按鈕時的數據。請找到所附的plnkr。

Follow this plnkr

Answer 1

錯誤的原因可能是在順序執行代碼（顯示/隱藏列和改變員工的變量）。一旦您更改了員工內容，ng-repeat將重新加載。爲你的邏輯的快速的解決方案是，將顯示/隱藏程序員工變量的內容後，與使用$範圍變化$看：

... 
var $tbl = $("#employeeTable"); 
var $tblhead = $("#employeeTable th"); 

$scope.saveSelectedColumn = function(){ 
... 
$scope.tableDataReset = function(){ 
     $scope.employees=[{name:'John', age:125, gender:'boy'}, 
         {name:'Jessie', age:130, gender:'girl'}]; 

    $scope.$watch('employees', function(newValue, oldValue) { 
     var getLocalStorageDate = localStorage.getItem("localData"); 
     var testData = JSON.parse(getLocalStorageDate); 

     if(testData != undefined && testData != null){    
      angular.forEach(testData, function(value, key){ 
       if(value) 
       $tbl.find('tr :nth-child(' + (key + 1) + ')').show(); 
       else 
        $tbl.find('tr :nth-child(' + (key + 1) + ')').hide(); 
      }); 
     } 
    }); 


} 

建議：我會用$用於存儲哪個列可見/隱藏的範圍變量，並且在html中使用該變量執行show/hide funcionality。