Javascript 根据索引显示/隐藏列 &时代； 模态头 员工[0]中的 {{key}} 接近 重置 {{key}} {{employee.name} {{employee.age} {{employee.gender} {{colSettings}} var myApp=angular.module（'myApp'，[]）； myApp.controller（'checkBoxController'，函数（$scope）{ $scope.employees=[{ 姓名：'约翰'， 年龄:25岁， 性别：'男孩' }, { 名字：“杰西”， 年龄:30,， 性别：'女孩' }]; $scope.colSettings=[true，true，true]； $scope.tableDataReset=函数（）{ $scope.employees=[{ 姓名：'约翰'， 年龄:25岁， 性别：'男孩' }, { 名字：“杰西”， 年龄:30,， 性别：'女孩' }]; }; });

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

跟随plnk

---

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

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

{{key}}
{{value}}

---

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

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

{{key}}
{{value}}

---

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

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'checkBoxController'，函数（$scope）{
$scope.employees=[{
姓名：'约翰'，
年龄:25岁，
性别：'男孩'
}, {
名字：“杰西”，
年龄:30,，
性别：'女孩'
}];
$scope.getColSettingForRow=函数（键）{
var keys=Object.keys（$scope.employees[0]）；
var指数=键。indexOf（键）；
收益指数；
}
$scope.colSettings=[true，true，true]；
$scope.tableDataReset=函数（）{
$scope.employees=[{
姓名：'约翰'，
年龄:25岁，
性别：'男孩'
}, {
名字：“杰西”，
年龄:30,，
性别：'女孩'
}];
};
});

安古拉斯普朗克
文件。写（“”）；
&时代；
模态头
员工[0]中的

{{key}}

接近
重置
{{key}}
{{employee.name}
{{employee.age}
{{employee.gender}
{{colSettings}}
我更喜欢动态操作，这样就不需要记住索引


var myApp=angular.module（'myApp'，[]）；
myApp.controller（'checkBoxController'，函数（$scope）{
$scope.employees=[{
姓名：'约翰'，
年龄:25岁，
性别：'男孩'
}, {
名字：“杰西”，
年龄:30,，
性别：'女孩'
}];
$scope.getColSettingForRow=函数（键）{
var keys=Object.keys（$scope.employees[0]）；
var指数=键。indexOf（键）；
收益指数；
}
$scope.colSettings=[true，true，true]；
$scope.tableDataReset=函数（）{
$scope.employees=[{
姓名：'约翰'，
年龄:25岁，
性别：'男孩'
}, {
名字：“杰西”，
年龄:30,，
性别：'女孩'
}];
};
});

安古拉斯普朗克
文件。写（“”）；
&时代；
模态头
员工[0]中的

{{key}}

接近
重置
{{key}}
{{employee.name}
{{employee.age}
{{employee.gender}
{{colSettings}}
我将解释另一种选择。
您必须为colSettings重复ng，因为您正在为员工使用索引，这就是它不起作用的原因

如果您在每个示例中使用布尔值记录所有colSettings，您可以使用此值显示或隐藏，但您将使用colSettings索引，因为在ng repeat中，您将循环使用colSettings，并且可以打印可见列的值。
我将解释另一种方法。
您必须为colSettings重复ng，因为您正在为员工使用索引，这就是它不起作用的原因

如果在每个示例中使用布尔值记录所有colSettings，则可以使用此值显示或隐藏，但是您将使用colSettings的索引，因为在ng repeat中，您将通过colSetting进行循环，并且可以打印可见列的值。
saveSelectedColumn方法中有哪些内容？当前选中复选框并取消选中“显示/隐藏表列”。我想要