ng-class disables ng-show for ng-table headers?

Question

Stumbled across a weird bug, wondering if anyone has seen this or understands why it happens? I have an ng-table with dynamic headers and dynamic rows of data that loads on a query.

Before the data loads, the headers can be filtered by a checkbox that toggles the column.visible attribute, dictated by ng-show. When I set column.visible to false, the correct header properly disappears, as expected. Once I run a query, though, and data loads, the headers no longer filter EVEN THOUGH the columns of data DO filter and the ng-show variable for both is set to the exact same attribute (column.visible) using the same object (columns).

Check it out:

<table ng-table="tableParams" class="table table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th ng-repeat="column in columns"
          ng-show="column.visible"
          class="text-center sortable col-md-2 "
          ng-class="{
            'sort-asc': tableParams.isSortBy(column.field, 'asc'),
            'sort-desc': tableParams.isSortBy(column.field, 'desc')
          }"
          ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc');tableParams.reload();">
        {{column.title}}
      </th>
    </tr>
</thead>
<tbody>
  <tr ng-repeat="dataEntry in $data" ng-class-odd="'odd'" ng-class-even="'even'">
    <td ng-repeat="column in columns" 
        ng-show="column.visible" 
        sortable="column.field">
      <span ng-if="column.field!='giftCardUrl'">{{dataEntry[column.field]}}</span>
      <a ng-if="column.field==='giftCardUrl'" ng-click="openInNewTab(dataEntry.giftCardUrl)">{{ dataEntry.giftCardUrl }}</a>
    </td>
  </tr>
</tbody>

Here is the columns object:

 $scope.columns = [
{ title: 'Account Merchant Name', field: 'name', visible: true},
{ title: 'GiftCard Url', field: 'giftCardUrl', visible: true },
{ title: 'Account Id', field: 'accountId', visible: true },
{ title: 'Egift Id', field: 'egiftId', visible: true },
{ title: 'Account Number', field: 'accountNumber', visible: true },
{ title: 'Product Id', field: 'productId', visible: true },
{ title: 'Hidden', field: 'hidden', visible: true }
];

The headers have an ng-class attribute on them, and the data does not. Once I remove the ng-class from the div, the whole thing works, no problem AND the column sorting still works. Any ideas why ng-class would disable the first ng-show?

Thanks!

Answer 1

i couldn't reproduce bug, but from your words i made working plunk. This plunk is based on example provided.

html

<table ng-table="tableParams" show-filter="true" class="table">
        <thead>
        <tr>
            <th ng-repeat="column in columns" ng-show="column.visible"
                class="text-center sortable" ng-class="{
                    'sort-asc': tableParams.isSortBy(column.field, 'asc'),
                    'sort-desc': tableParams.isSortBy(column.field, 'desc')
                  }"
                ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
                {{column.title}}
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in $data" ng-class-odd="'odd'" ng-class-even="'even'"  >
            <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field">
                <span ng-if="column.field!='Age'">{{user[column.field]}}</span>
      <a ng-if="column.field=='Age'" ng-click="console.log('work')">{{ user.Age }}</a>
            </td>
        </tr>
        </tbody>
    </table>

controller.js

$scope.columns = [
                { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } },
                { title: 'Age', field: 'age', visible: true }
            ];
            $scope.loadData=function()
            {
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                filter: {
                    name: 'M'       // initial filter
                }
            }, {
                total: data.length, // length of data
                getData: function($defer, params) {
                    // use build-in angular filter
                    var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;

                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });
            };