ngTable中每页的行数不正确

时间:2016-09-09 23:10:41

标签: angularjs 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});

});

2 个答案:

答案 0 :(得分:1)

我认为问题在于您的HTML代码没有意义,因为未正确创建tr / td,我在以下plunk

中修复了该问题

基本上,我更改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>

答案 1 :(得分:1)

两个问题:

$scope.tableParams = new NgTableParams({count:5},{dataset: $scope.data});

应该是 $scope.tableParams = new NgTableParams({count:5},{data: $scope.data,counts: [5, 10]});

请注意我是如何使用数据而不是数据集的(我认为数据集适用于没有动态列的表)。

在你的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标题,因为您已经将cols传递给它。 http://plnkr.co/edit/U8eMbtzAlxIf6ftRtxZA?p=preview