Question

早上好，

我尝试使用AngularJS和ngTable构建包含组的表：

HTML

<table ng-table="tableParams" show-filter="true" class="table table-hover">
    <colgroup>
        <col />
        <col />
        <col />
    </colgroup>
   <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Surname
            </th>
            <th>
                Age
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="group in $data" class="ng-table-group">
            <td colspan="3">
                <a href="" ng-click="group.$hideRows = !group.$hideRows">
                    <strong>Request Id {{ group.RequestId }}</strong>
                </a>
            </td>
        </tr>
        <tr ng-hide="group.$hideRows" ng-repeat="person in $data.people">
            <td sortable="'RequestId'" data-title="'RequestId'" ng-if="false">
                {{group.RequestId}}
            </td>
            <td sortable="'Name'" data-title="'Name'">
                {{person.Name}}
            </td>
            <td sortable="'Surname'" data-title="'Surname'">
                {{person.Surname}}
            </td>
            <td sortable="'Age'" data-title="'Age'">
                {{person.Age}}
            </td>
        </tr>
    </tbody>
</table>

我没有ng-app和ng-controller因为页面是和Angular视图所以在主视图中有。

控制器

myApp.controller('myController', function ($scope, $rootScope, $WebService, ngTableParams) {
    $scope.tableParams = new ngTableParams({}, {
        group: 'RequestId',
        counts: [],
        getData: function ($defer, params) {
            var promise = $WebService.getPersons($scope);

            promise.then(function (results) {

                $defer.resolve(results.data);

            }, function (data, status, headers, config) {
                alert('There was an error while loading the requested data.');
            });
        }
    });
});

我从网络服务获得的json看起来像这样：

[
   {
      "RequestId":11,
      "people":[
        {
            "Name":"James",
            "Surname":"Doo",
            "Age":20
        },
        {
            "Name":"John",
            "Surname":"Doo",
            "Age":20
         }
      ]
   },
   {
      "RequestId":12,
      "people":[
        {
            "Name":"Mary",
            "Surname":"Doo",
            "Age":20
        },
        {
            "Name":"Jane",
            "Surname":"Doo",
            "Age":20
         }
      ]
   }
]

我按照此example进行了操作，结果是该表显示了链接Request Id ...但是当我点击它时，该组没有显示。我在控制台中没有错误，没有任何反应。

我可以看到标题列的不同宽度，所以我认为数据已正确加载。

我做错了什么？

谢谢

我的ngTable与群组不起作用

0 个答案: