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 存储在本地存储中的数组中（即 1 表示选中，0 表示未选中）。 onclick 有一个重置按钮，我正在填充表格，但我只想显示这些列，具体取决于存储在 localstorage 中的值为 0 和 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 中使用该变量执行显示/隐藏功能。