Question

In this plunk我有一个ngTable，其中包含按区域分组的用户列表。我从this ngTable grouping demo那里得到了例子。但是，该表显示为空，并且不显示任何行或分组。这段代码出了什么问题？

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

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

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

脚本src是：

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

谢谢

Answer 2

你的代码看起来很好。我刚刚更改了一个脚本，并在页面上得到了一些结果。只需替换

<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>

这是我每天使用的版本。

ngTable分组无效

2 个答案: