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);

                }
    }


});

使用设置按钮获取表格数据列表，点击其中打开模态对话框。此模式对话框包含的复选框等于表中的数字列。用户选择任何一个复选框＆amp;关闭按钮，然后根据选中的复选框过滤表（即，仅检查列在表中可见的复选框）。当用户按下模态的关闭按钮时，我存储状态为0＆amp; localstorage中的数组为1（即1表示已检查，0表示未选中）。有一个重置按钮，我正在填充表格，但我想只显示那些列，具体取决于存储在localstorage中的值为0＆amp; 1.单击“重置”按钮重置数据时，我遇到问题。请找到附带的plnkr。

Follow this plnkr

Answer 1

错误的原因可能是执行代码的顺序（显示/隐藏列和更改员工变量）。更改员工内容后， ng-repeat将重新加载。您的逻辑的快速解决方案是使用 $ scope更改员工变量的内容之后显示/隐藏过程。$ watch ：

...
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();
            });
        }
    });


}

推荐：我会使用$ scope变量来存储哪些列可见/隐藏，并使用html中的该变量执行show / hide功能。