如何在 ngtable 中创建嵌套网格？答案

【问题标题】：how to create a nested grid in ngtable?如何在 ngtable 中创建嵌套网格？
【发布时间】：2014-06-25 17:07:44
【问题描述】：

我正在尝试在我的 ngtable 中创建一个嵌套网格，如下所示：

 <table ng-table="tableParams" class="table">
      <tr ng-repeat="user in $data">
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
        <td data-title="'kids'">
          <table ng-table="nestedtableParams" class="table">
            <tr ng-repeat="nesteduser in $nesteddata">
              <td data-title="'Name'">{{nesteduser.name}}</td>
              <td data-title="'Age'">{{nesteduser.age}}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

问题是：为什么嵌套数据不显示？这是一个plunkr： http://plnkr.co/edit/dKTtU89f7z6nQptgEZxN?p=preview

【问题讨论】：

标签： angularjs ng-grid ngtable

【解决方案1】：

通过将数据添加到$scope 来实现此功能：（部分示例代码）

$scope.nesteddata = [{
    name: "Kid Moroni",
    age: 50
}, {
    name: "Kid Tiancum",
    age: 43
}, {
    name: "Kid Jacob",
    age: 27
}, {
    name: "Kid Nephi",
    age: 29
}, {
    name: "Kid Enos",
    age: 34
}];

然后，在控制器函数中，引用这些$scope 变量：

$scope.nestedtableParams = new ngTableParams({
    page: 1, // show first page
    count: 10 // count per page
}, {
    total: $scope.nesteddata.length, // length of data
    getData: function($defer, params) {
        $defer.resolve($scope.nesteddata.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

最后我在标记中省略了$ prefix，因为这个数据现在在范围内：

<table ng-table="tableParams" class="table">
    <tr ng-repeat="user in data">
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
        <td>
            <table ng-table="nestedtableParams" class="table">
                <tr ng-repeat="user in nesteddata">
                    <td data-title="'Name'">{{user.name}}</td>
                    <td data-title="'Age'">{{user.age}}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Working Plunker（虽然我怀疑这样嵌套网格是否有意义）

【讨论】：

plunker坏了