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。