1

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

在加载数据之前，可以通过切换 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 }
];

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

谢谢！

4

1 回答 1

0

我无法重现错误，但从你的话中我做出了工作plunk。这个 plunk 基于提供的示例。

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>

控制器.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()));
                }
            });
            };
于 2014-11-14T16:06:11.033 回答