Question

我遇到了与ng-table相关的问题。我使用的是Angular v.1.3.8和ng-table v.0.8.3。我想创建一个分页的ng表，我可以在每行中嵌套ng-table。但是我的标题无法正常呈现问题。外表包含所有标题（包括嵌套表格的标题）。

以下是我的示例代码：

＆＃13;

var app = angular.module("app", ["ui.bootstrap", "ngTable"]);
app.controller("MyController", ["$scope", "ngTableParams", function MyController($scope, ngTableParams) {
    // Prepare data
    $scope.data = [];
    for (var i = 1; i <= 10; i++) {
      var list = [];
      for (var t = 1; t <= 10; t++) {
        list.push({id: t, name: 'Nested '+i*t})
      }
      $scope.data.push({id: i, name: 'Test '+i, nested: list});
    }
    
    // Prepare tables
    $scope.nestedTableParams = new ngTableParams({}, {});
    $scope.tableParams = new ngTableParams({
      page: 1,
      count: 10
    }, {
      total: $scope.data.length,
      getData: function($defer, params) {
        $defer.resolve($scope.data);
      }
    });
  }
]);

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <link data-require="ng-table@0.8.3" data-semver="0.8.3" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.css" />
  <script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
  <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
  <script data-require="ng-table@0.8.3" data-semver="0.8.3" src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="MyController">
  <div class="row">
    <div class="col-md-12">
      <h2>Nested ng-table example</h2>
      <table class="table table-striped" ng-table="tableParams">
        <tr ng-repeat="row in $data">
          <td data-title="'ID'">{{row.id}}</td>
          <td data-title="'Name'">{{row.name}}</td>
          <td data-title="'Nested'">
            <table class="table table-striped" ng-table="nestedTableParams">
              <tr ng-repeat="elem in row.nested">
                <td data-title="'Nested ID'">{{elem.id}}</td>
                <td data-title="'Nested Name'">{{elem.name}}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>
</html>

＆＃13;

另外，我已经准备好Plnkr作为我的问题的一个例子： https://plnkr.co/edit/FjpdxLqliUN1B03ONvo4?p=preview

另外，我还有另一个问题。为什么我必须在第23行迭代row.nested而不是$ data（如外表中）？

嵌套的ng表呈现问题

0 个答案: