ngTable 分组不起作用

Question

In this plunk I have an ngTable that contains a list of users, grouped by area. I took the example from this ngTable grouping demo。 table 仍然显示为空，并且不显示任何行或分组。这段代码有什么问题？

HTML

    <table ng-table="tableParams" class="table table-bordered table-hover">
        <colgroup>
          <col width="50%" />
          <col width="30%" />
          <col width="20%" />
        </colgroup>
        <tr class="ng-table-group" ng-repeat-start="group in $groups">
          <td colspan="3">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
              <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
              <strong>{{ group.value }}</strong>
            </a>
          </td>
        </tr>
        <tr ng-repeat="u in data" ng-repeat-end>
            <td title="'User ID'">{{ u.uid }}</td>
            <td title="'Name'">{{ u.name }}</td>
            <td title="'Area'" groupable="'area'">{{ u.area }}</td>
        </tr>
    </table>

Javascript

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

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

          $scope.data = [ 
             { uid: 'User 11', name: 'Name 11', area: 'Area 1'},
             { uid: 'User 12', name: 'Name 12', area: 'Area 1'},
             { uid: 'User 21', name: 'Name 21', area: 'Area 2'},
             { uid: 'User 22', name: 'Name 22', area: 'Area 2'}
          ];

          $scope.tableParams = new NgTableParams({
              // initial grouping
              group: "area"
            },{
              dataset: $scope.data
            });
});

Answer 1

您的代码看起来非常完美。我刚刚更改了一个脚本并在页面上得到了一些结果。只需更换

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>

和

<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>

这是我日常使用的版本。

Answer 2

我知道@greenshade 的回答已经完成。但就像@greenshade 一样，我检查了那个 plunker，我发现你使用了旧的 ng-table 库 link。如果你想在 CDNjs 的库中工作，那么你应该使用最新的脚本 URL:

https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js

脚本源是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js"></script>

谢谢

ngTable 分组不起作用

ngTable grouping not working

angularjs

ngtable