根据复选框选择在ngTable中显示或隐藏列

Question

我有一个包含很多列的数据表，因此需要滚动，这对用户不太友好。我正在尝试实现一个复选框，用户可以根据标题选择要查看的列。我怎样才能做到这一点？

HTML：

<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
 <div class="row">
        <div class="col-md-12">
            <div class="widget widget-table action-table" style="overflow:auto">
                <!-- /widget-header -->
                <div class="widget-content table-container" ng-controller="getTalentController">
                        <table ng-table="talentsList" show-filter="true" class="table table-striped table-bordered" style="font-size: smaller;text-align:center">
                            <tr ng-repeat="talent in data">
                                <td data-title="'#'"  style="width:5px">{{ $index+1 }}</td>
                                <td data-title="'Employee ID'" sortable="'employeeNo'" filter="{ 'employeeNo': 'text' }" style="width:50px">
                                    {{talent.employeeNo}}
                                </td>
                                <td data-title="'Name'" sortable="'fullName'" filter="{ 'fullName': 'text' }">
                                    {{talent.fullName}}
                                </td>
 <td data-title="'From'" sortable="'inDate'" filter="{ 'inDate': 'text' }">
                                    {{talent.inDate}}
                                </td>
                                <td data-title="'Till'" sortable="'outTill'" filter="{ 'outTill': 'text' }">
                                    {{talent.outTill}}
                                </td>
                                <td data-title="'Account'" sortable="'account'" filter="{ 'account': 'text' }">
                                    {{talent.account}}
                                </td>
<td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }" ng-class="{greenStyle : talent.state == 'Available', blueStyle : talent.state == 'Billed', redStyle: talent.state == 'Blocked'}">
                                    <div style="border:solid">{{talent.state}}</div>

                                </td>
                                <td data-title="'Remarks'" ng-click="showRemarks[$index]=!showRemarks[$index]" style="width:70px">
                                    <span ng-hide="showRemarks[$index]" class="ellipses" style="width:inherit">{{talent.remark}} </span>
                                    <span ng-show="showRemarks[$index]"> {{talent.remark}} </span>
                                </td>
                                <td data-title="'Resume'">
                                    <a ng-click="downloadResume(talent.id)" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="resume"><svg class="glyph translucent floppy-disk"><use xlink:href="#translucent-floppy-disk"></use></svg></a>
                                </td>
                                <td data-title="'Reserve'">
                                    <a ui-sref="reservation.edit({id: talent.id})" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="save"><svg class='glyph stroked hand-cursor'><use xlink:href='#stroked-hand-cursor' /></svg></a>
                                </td>
                            </tr>
                        </table>
                    </div>
                <!-- /widget-content -->
            </div>
            <!-- /widget -->
        </div>
        <!-- /span12 -->
    </div>
    <!-- /row -->
</div>

控制器：

myApp.controller('getTalentController', ['$scope', 'talentServices', 'dataTable', '$window', '$timeout', '$rootScope', '$location', '$filter', 'ngDialog', '$log','ngTableParams',
    function ($scope, talentServices, dataTable, $window, $timeout, $rootScope, $location, $filter, ngDialog, $log, ngTableParams) {
    talentServices.getTalents().then(function (result) {
        var mainData = result.data;
angular.forEach(result.data, function (value, key) {
            if (value.lastName == undefined) {

            }
            var fullName = value.firstName + '' + ((value.lastName != undefined) ? (value.lastName) : (''));
            result.data[key].fullName = fullName;

        });
    });
}]);

App.js：

myApp.factory('dataTable', ['$filter', 'ngTableParams', '$rootScope', function ($filter, ngTableParams, $rootScope) {

    var factoryDefinition = {
      render: function($scope, config, componentId, data) {
          if (!config) config = { filter: { 'fullName': $rootScope.mysearch } };

        var config1 = angular.extend({}, {page:1, count:8}, config)

        $scope[componentId] = new ngTableParams(config1, {
            total: data.length, // length of data
            getData: function ($defer, params) {
            // organize filter as $filter understand it (graph object)
                var filters = {};
                var val = $rootScope.mysearch;
                var key = "fullName";
                $rootScope.mysearch = "";

                angular.forEach(params.filter(), function (val, key) {
                    var filter = filters;
                    var parts = key.split('.');
                    for (var i = 0; i < parts.length; i++) {
                        if (i !== parts.length - 1) {
                            filter[parts[i]] = {};
                            filter = filter[parts[i]];
                        }
                        else {
                            filter[parts[i]] = val;
                        }
                    }
                });
                // use build-in angular filter
                var filteredData = params.filter() ?
                        $filter('filter')(data, filters) :
                        data;
                var orderedData = params.sorting() ?
                        $filter('orderBy')(filteredData, params.orderBy()) :
                        data;
                params.total(orderedData.length); // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                $scope.pageNumber = params.page();
                $scope.itemsPerPage = params.count();
            }
        }); 


      }
    }

    return factoryDefinition;
  }
]);

CSS文件：https://hastebin.com/wibahuyoxa.cs

我在网上看到了一个链接并试图实现它，但由于ngTableDemos而导致注入器错误。我尝试过的链接是：https://codepen.io/christianacca/pen/meevep