Question

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

在加载数据之前，标题可以通过一个复选框进行过滤，该复选框可以切换由ng-show指定的column.visible属性。当我将column.visible设置为false时，正确的标头正确地消失，正如预期的那样。但是，当我运行查询并加载数据时，标题不再过滤即使数据列DO过滤，并且两者的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 }
];

标题上有一个ng-class属性，而数据则没有。一旦我从div中删除了ng-class，整个过程就可以了，没问题，列排序仍然有效。任何想法为什么ng-class会禁用第一个ng-show？

谢谢！

Answer 1

我无法重现错误，但是根据你的话，我开始工作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()));
                }
            });
            };

ng-class禁用ng-table标头的ng-show？

1 个答案:

HTML

controller.js