偶然发现了一个奇怪的错误,想知道是否有人见过这个或理解为什么会发生这种情况?我有一个 ng 表,其中包含在查询上加载的动态标题和动态数据行。
在加载数据之前,可以通过一个复选框过滤标头,该复选框切换由 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 类属性,而数据则没有。一旦我从div 中删除 ng 类,整个事情就可以工作了,没问题,列排序仍然有效。任何想法为什么ng-class会禁用第一个ng-show?
谢谢!
我无法重现错误,但从你的话中,我使工作变得笨拙。此 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()));
}
});
};