<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">×</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。
答案 0 :(得分:0)
错误的原因可能是执行代码的顺序(显示/隐藏列和更改员工变量)。更改员工内容后, 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功能。