根据索引显示/隐藏列答案

【问题标题】：Show/hide columns depending upon index根据索引显示/隐藏列
【发布时间】：2016-12-08 03:58:59
【问题描述】：

<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 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'
     }];
   };
 });

有一个带有设置按钮的表格数据列表，单击该按钮会打开一个模式对话框。此模式对话框包含包含等于表中列数的复选框。用户选择任何复选框和关闭按钮，然后根据选中的复选框过滤表格（即仅选中的那些复选框在表格中可见列）。当前为 colSettings 数组中的选中和未选中复选框存储 true 和 false。同样在复选框选择上，当前隐藏了我想要在模式关闭按钮上的列。使用上面的代码，我可以隐藏 th 但不是 td 及其数据。

关注 plnk http://plnkr.co/edit/G5bT7G?p=preview

【问题讨论】：

你在 saveSelectedColumn 方法中有什么？
当前选中复选框并取消选中显示/隐藏表格列。我想在覆盖的关闭按钮上执行此操作，即 saveSelectedColumn()。

标签： javascript html angularjs html-table

【解决方案1】：

如果您有更多列，请动态更新所有内容

  <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

【讨论】：

它有效。但我的表将有很多列，目前只包括在内。所以每次对索引进行硬编码都是没有意义的。还有其他选择吗？此外 $index 将始终给出当前索引，所以不知道为什么会出现问题。
您使用的是员工的索引而不是列的索引，这是问题
@migueref 好的。有没有办法实现它？

【解决方案2】：

我更喜欢动态的，这样你就不需要记住索引了

 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">&times;</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>

【讨论】：

我的 json 对象中也有键 id 和创建日期，但是在对复选框列表和表列表应用重复时需要忽略它们。这可能吗？
如果你想隐藏它们。只需在复选框下忽略它们，然后 tr 就可以了。它会起作用的。如果你想要正确的答案。请把样品寄给我，以便我检查。

【解决方案3】：

我将解释一个替代方案。您必须为 colSettings 进行 ng-repeat，因为您正在为员工使用索引，这就是为什么不起作用。

如果您在每个示例中使用布尔值记录所有 colSettings，您可以使用该值显示或隐藏，但您将使用 colSettings 的索引，因为在您的 ng 重复中，您将循环通过 colSetting，您可以打印这些值对于可见列。

【讨论】：

如果您有任何问题，可以提问以获取更多信息
无法获取。你们可以实施和展示吗？