<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 ng-repeat='(key, val) in employees[0]'>
<label>
<input ng-model='colSettings[$index]' type="checkbox" />{{ key }}</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" border="1">
<thead>
<tr>
<th ng-if='colSettings[$index]' ng-repeat='(key, val) in employees[0]' class="name">{{ key }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td ng-if='colSettings[$index]'>{{employee.name}}</td>
<td ng-if='colSettings[$index]'>{{employee.age}}</td>
<td ng-if='colSettings[$index]'>{{employee.gender}}</td>
</tr>
</tbody>
</table>
<a href="" title="Column Setting" data-toggle="modal" data-target="#myModal">Settings</a> {{ colSettings }}
</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.colSettings = [true, true, true];
$scope.tableDataReset = function() {
$scope.employees = [{
name: 'John',
age: 25,
gender: 'boy'
}, {
name: 'Jessie',
age: 30,
gender: 'girl'
}];
};
});
使用设置按钮获取表格数据列表，点击其中打开模态对话框。此模式对话框包含的复选框等于表中的数字列。用户选择任何一个复选框＆amp;关闭按钮，然后根据选中的复选框（即仅检查列在表中可见的复选框）过滤表。 目前存储真实＆amp;对于已检查的＆amp; colSettings数组中未选中的复选框。同样在复选框选择当前隐藏我想要的模态关闭按钮的列。使用上面的代码，我可以隐藏th而不是td及其数据。
答案 0 :(得分：2)
如果您有更多列，请动态更新所有内容
<table class="table-condensed" id="employeeTable" border="1">
<thead>
<tr>
<th ng-if="val" ng-repeat="(key, val) in colSettings" class="name">{{ key }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td ng-if="colSettings[key]" ng-repeat="(key,value) in employee">{{value}}</td>
</tr>
</tbody>
</table>
<强> DEMO
答案 1 :(得分：0)
我更喜欢动态，因此不需要你记住索引
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.getColSettingForRow = function(key){
var keys = Object.keys($scope.employees[0]);
var index = keys.indexOf(key);
return index;
}
$scope.colSettings = [true, true, true];
$scope.tableDataReset = function() {
$scope.employees = [{
name: 'John',
age: 25,
gender: 'boy'
}, {
name: 'Jessie',
age: 30,
gender: 'girl'
}];
};
});<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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 ng-repeat='(key, val) in employees[0]'>
<label>
<input ng-model='colSettings[$index]' type="checkbox" />{{ key }}</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" border="1">
<thead>
<tr>
<th ng-if='colSettings[$index]' ng-repeat='(key, val) in employees[0]' class="name">{{ key }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td ng-if='colSettings[getColSettingForRow("name")]'>{{employee.name}}</td>
<td ng-if='colSettings[getColSettingForRow("age")]'>{{employee.age}}</td>
<td ng-if='colSettings[getColSettingForRow("gender")]'>{{employee.gender}}</td>
</tr>
</tbody>
</table>
<a href="" title="Column Setting" data-toggle="modal" data-target="#myModal">Settings</a> {{ colSettings }}
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
我将解释一个替代方案。 您必须为colSettings进行ng-repeat，因为您正在使用员工的索引，这就是为什么不起作用。
如果您使用每个示例的值布尔值记录所有colSettings，您可以使用此值显示或隐藏，但是您将使用colSettings索引，因为在您的ng重复中，您将循环遍历colSetting并且您可以打印值对于可见列。