我使用ng-Table在angularJS中创建了一个应用程序,在我正在使用ng-Table的分组功能的应用程序中,该应用程序适用于单个表,如下面给出的样本中所示
单表在单个控制器中进行分组
但问题是,在我的应用程序中,我在一个控制器中使用两个表,当我试图将两个表与分组功能,我没有得到表显示
任何人都可以告诉我一些解决方案
两个表在一个Controller中进行分组
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="firstTableParams" class="table">
<tbody ng-repeat="group in myData.$groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
<table ng-table="secondTableParams" class="table">
<tbody ng-repeat="group in myAnotherData.$groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</body>
迭代$groups
<tbody ng-repeat="group in $groups">
在第二个插件中,它必须是,因为你通过defer
解析数据,每个表处理自己的数据
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="firstTableParams" class="table">
<tbody ng-repeat="group in $groups"> //changed here
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
<table ng-table="secondTableParams" class="table">
<tbody ng-repeat="group in $groups"> //changed here
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<strong>{{ group.value }}</strong>
</td>
</tr>
<tr ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</body>
对于第一个表控制器,在两个表中使用ng-repeat中的$ data它将起作用
$scope.firstTableParams= [];
$scope.data= data;
$scope.firstTableParams= new ngTableParams({
page: 1,
count: 10,
}, {
total: $scope.data.length,
getData: function($defer, params) {
var filters = params.filter();
if (params.settings().$scope == null) {
params.settings().$scope = $scope;
}
var tempDateFilter;
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data, params.orderBy()) :
$scope.data;
if(filters) {
orderedData = $filter('filter')(orderedData, filters);
filters.Date = tempDateFilter;
}
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}
})`
对于第二个表控制器
$scope.secondTableParams= [];
$scope.data1= data;
$scope.secondTableParams= new ngTableParams({
page: 1,
count: 10,
}, {
total: $scope.data1.length,
getData: function($defer, params) {
var filters = params.filter();
if (params.settings().$scope == null) {
params.settings().$scope = $scope;
}
var tempDateFilter;
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data1, params.orderBy()) :
$scope.data1;
if(filters) {
orderedData = $filter('filter')(orderedData, filters);
filters.Date = tempDateFilter;
}
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}
})