Показать/скрыть столбцы в зависимости от индекса

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

Имеет список данных таблицы с кнопкой настроек, на которой открывается диалоговое окно модального диалога. В этом модальном диалоговом окне содержится флажок, соответствующий столбцам числа в таблице. Пользователь выбирает любую из флажков & кнопку закрытия, тогда таблица отфильтровывается в зависимости от флажка, который отмечен (то есть флажки, отмеченные только теми столбцами, которые видны в таблице). В настоящее время сохраняется значение true & false для отмеченных & снятых флажков в массиве colSettings. Также при выборе флажка в настоящее время скрываются столбцы, которые я хочу на модальной кнопке закрытия. Используя вышеприведенный код, я могу скрыть 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

Answer 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){ 
 
\t var keys = Object.keys($scope.employees[0]); 
 
\t var index = keys.indexOf(key); 
 
\t 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>

Answer 3

Я буду объяснять альтернативу. Вы должны сделать ng-repeat для colSettings, потому что вы используете индекс для сотрудников, поэтому он не работает.

Если вы записываете все colSettings со значением boolean, например, вы можете показать или скрыть это значение, но вы будете использовать индекс colSettings, потому что в вашем повторном ng вам будет проходить цикл через colSetting, и вы можете распечатать значения для видимых столбцов.