ngTable 中每页的行数不正确
Incorrect number of rows per page in ngTable
在这个 plunk 中,我有一个使用动态列生成的 ngTable。每页的行数是 5,但如您所见,没有分页,行数是 8。这是缺陷还是我做错了什么?
HTML
<div ng-controller="myCtl" ng-app="app">
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<tr ng-repeat="row in data">
<td title="'Name'" ng-repeat="col in cols">{{row[col.nm]}}</td>
</tr>
</table>
</div>
Javascript:
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {
$scope.cols = [ {nm:'uid', title:'User ID'}, {nm:'ugr', title: 'Group ID'} ];
$scope.data = [
{ uid: 'User 1',ugr: 'Group 1'},
{ uid: 'User 2', ugr: 'Group 2'},
{ uid: 'User 3', ugr: 'Group 3'},
{ uid: 'User 4', ugr: 'Group 4'},
{ uid: 'User 5', ugr: 'Group 5'},
{ uid: 'User 6', ugr: 'Group 6'},
{ uid: 'User 7', ugr: 'Group 7'},
{ uid: 'User 8', ugr: 'Group 8'}
];
$scope.tableParams = new NgTableParams({count:5},{dataset: $scope.data});
});
我认为问题在于您的 HTML 代码没有意义,因为 tr/td 未正确创建,我在以下 plunk[=12 中解决了这个问题=]
基本上,我更改了 ng-repeat 以正确生成行
<table ng-table="tableParams" class="table" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.uid}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.ugr}}</td>
</tr>
</table>
两期:
$scope.tableParams = new NgTableParams({count:5},{dataset: $scope.data});
应该是
$scope.tableParams = new NgTableParams({count:5},{data: $scope.data,counts: [5, 10]});
请注意我是如何使用数据而不是数据集的(我认为数据集适用于没有动态列的 tables)。
在您的 html 中,您应该从 $data 获取数据,从 $columns 获取列。那些美元符号变量是指ng-table.
提供给你的变量
您的数据是直接从 $scope.data 加载的,而不是使用传递给 NgTableParams 的数据。
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<tr ng-repeat="row in $data">
<td ng-repeat="col in $columns">{{row[col.nm]}}</td>
</tr>
</table>
此外,您不需要设置 td title,因为您已经将 cols 传递给它。
http://plnkr.co/edit/U8eMbtzAlxIf6ftRtxZA?p=preview
在这个 plunk 中,我有一个使用动态列生成的 ngTable。每页的行数是 5,但如您所见,没有分页,行数是 8。这是缺陷还是我做错了什么?
HTML
<div ng-controller="myCtl" ng-app="app">
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<tr ng-repeat="row in data">
<td title="'Name'" ng-repeat="col in cols">{{row[col.nm]}}</td>
</tr>
</table>
</div>
Javascript:
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {
$scope.cols = [ {nm:'uid', title:'User ID'}, {nm:'ugr', title: 'Group ID'} ];
$scope.data = [
{ uid: 'User 1',ugr: 'Group 1'},
{ uid: 'User 2', ugr: 'Group 2'},
{ uid: 'User 3', ugr: 'Group 3'},
{ uid: 'User 4', ugr: 'Group 4'},
{ uid: 'User 5', ugr: 'Group 5'},
{ uid: 'User 6', ugr: 'Group 6'},
{ uid: 'User 7', ugr: 'Group 7'},
{ uid: 'User 8', ugr: 'Group 8'}
];
$scope.tableParams = new NgTableParams({count:5},{dataset: $scope.data});
});
我认为问题在于您的 HTML 代码没有意义,因为 tr/td 未正确创建,我在以下 plunk[=12 中解决了这个问题=]
基本上,我更改了 ng-repeat 以正确生成行
<table ng-table="tableParams" class="table" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.uid}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.ugr}}</td>
</tr>
</table>
两期:
$scope.tableParams = new NgTableParams({count:5},{dataset: $scope.data});
应该是
$scope.tableParams = new NgTableParams({count:5},{data: $scope.data,counts: [5, 10]});
请注意我是如何使用数据而不是数据集的(我认为数据集适用于没有动态列的 tables)。
在您的 html 中,您应该从 $data 获取数据,从 $columns 获取列。那些美元符号变量是指ng-table.
提供给你的变量您的数据是直接从 $scope.data 加载的,而不是使用传递给 NgTableParams 的数据。
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<tr ng-repeat="row in $data">
<td ng-repeat="col in $columns">{{row[col.nm]}}</td>
</tr>
</table>
此外,您不需要设置 td title,因为您已经将 cols 传递给它。 http://plnkr.co/edit/U8eMbtzAlxIf6ftRtxZA?p=preview