javascript - 根据索引显示/隐藏列

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

Answer 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