javascript - ng-class 禁用 ng-table header 的 ng-show？

Question

偶然发现一个奇怪的错误，想知道是否有人见过这个或理解为什么会发生？我有一个 ng-table，其中包含动态 header 和加载查询的动态数据行。

在数据加载之前，可以通过切换 column.visible 属性的复选框来过滤标题，由 ng-show 指定。当我将 column.visible 设置为 false 时，正确的标题会按预期正确消失。但是，一旦我运行查询并且加载数据，标题就不再过滤，即使数据列确实过滤并且两者的 ng-show 变量使用相同的对象设置为完全相同的属性(column.visible)(列)。

检查一下:

<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>

这是列对象:

 $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 }
];

header 具有 ng-class 属性，而数据则没有。一旦我从 div 中删除 ng-class，整个事情就可以正常工作，没有问题，并且列排序仍然有效。有什么想法为什么 ng-class 会禁用第一个 ng-show 吗？

谢谢!

Answer 1

我无法重现错误，但从你的话来看我可以工作plunk 。这个plunk基于example提供。

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()));
                }
            });
            };