通过使用Angularjs单击复选框来显示和隐藏表中的列

Question

我有一个包含大量列的表，我需要能够通过单击复选框显示和隐藏一些列。我尝试了ng-click--ng-show，$ scope $ watch的许多变体，现在我尝试通过addEventListener做到这一点，但是它不起作用，什么也没发生。

 $scope.showTheItem = false;

    function newFunction() {
        document.getElementById("showTheItemEvent").addEventListener('checked', function () {
            $scope.showTheItem = true;
            $scope.digest();
        });
    }

这是html：

<form ng-show="showTheForm">  // this is the form with checkboxes
            <table onload="newFunction();">
                <tr><td style="vertical-align:top" ng-repeat="item in superKeys" ng-if="$even"><input type="checkbox" id="showTheItemEvent" ng-true-value="checked" style="margin-left:3px; margin-right:15px"><label>{{localization.setLicTabs[locale][item]}}</label></td></tr>
                <tr style="height:10px"></tr>
                <tr><td style="vertical-align:top" ng-repeat="item in superKeys" ng-if="$odd"><input type="checkbox" id="showTheItemEvent" ng-true-value="checked" style="margin-left:3px; margin-right:15px"><label>{{localization.setLicTabs[locale][item]}}</label></td></tr>
            </table>
        </form>

<table>
    <thead>
        <tr> 
           <th ng-show="showTheItem">{{localization.setLicTabs[locale].VirtualType}}</th>
                    <th ng-show="showTheItem">{{localization.setLicTabs[locale].FarmName}}</th>
        </tr>
</thead>
 <tbody dir-paginate="item in dataObjHosts | filter:searchFilter | orderBy:orderListType:true | itemsPerPage: pageSize" pagination-id="POPaginatorServersSoft" current-page="currentPage" ng-click="setActiveState($event)">
                <tr >
                    <td ng-show="showTheItem"><span ng-bind="dataObj[item][0].VirtualType"></span></td>
                    <td ng-show="showTheItem"><span ng-bind="dataObj[item][0].FarmName"></span></td>
                </tr>