javascript - 带列的 ngTable 动态不显示列标题

Question

在此plunk我有两张表，一张是常规的 ng-table ，另一张是带列的 ng-table-dynamic 。两者都指向相同的数据。

第二个表不显示列标题，如何解决？

HTML

<br/> Table 1

<table ng-table="tableParams" class="table table-bordered table-hover">
    <tbody>
        <tr ng-repeat="u in data" ng-dblclick="alert('double click')">
            <td title="'User ID'">{{ u.uid }}</td>
            <td title="'Group'">{{ u.ugr }}</td>
        </tr>
    </tbody>
</table>

<br/> Table 2 

<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
  <tr ng-repeat="row in data">
    <td title="col.nm" ng-repeat="col in cols">{{row[col.nm]}}</td>
  </tr>
</table>

Javascript:

var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope,NgTableParams) {

      $scope.cols = [ {nm:'uid'}, {nm:'ugr'} ];

      $scope.data = [ 
        { uid: 'User 1',ugr: 'Group 1'},
        { uid: 'User 2', ugr: 'Group 2'}
      ];

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

});

Answer 1

您的 cols 中缺少 title 属性:

$scope.cols = [ {nm:'uid', title: 'User ID'}, {nm:'ugr', title: 'Group ID'} ];

See this plunkr .