AngularJS 使用 RowSpan 在 table 中生成分组数据

Question

如果我有如下数据结构：

data = [{"nums": [1, 6, 5], "name": "John"},
        {"nums": [2], "name": "Bob"},
        {"nums": [9, 6], "name": "Jason"}]

我希望它使用 ng-repeat 输出到 html 为：

|------------|
| 1 |        |
|---|        |
| 6 | John   |
|---|        |
| 5 |        |
|---|--------|
| 2 | Bob    |
|---|--------|
| 5 |        |
|---| Jason  |
| 2 |        |
|---|--------|

我该怎么做？

Answer 1

你可以在 tbody 上使用 ng-repeat，然后像这样继续循环下去

<table>
  <tbody ng-repeat="row in data">
    <tr ng-repeat="col in row.nums">
      <td>{{col}}</td>
      <td rowspan="{{$first ? row.nums.length : 1}}" ng-show="$first">{{row.name}}</td>
    </tr>
  </tbody>
</table>

Se plunker here

Answer 2

试试这个：

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

myApp.controller('MyCtrl',function($scope) {
    $scope.data = [{"nums": [1, 6, 5], "name": "John"},
        {"nums": [2], "name": "Bob"},
        {"nums": [9, 6], "name": "Jason"}];
});

th,td {
  border: 1px solid black;
}

.tdcell {
  border:  0px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<thead>
      <tr>
        <th>Name</th>
        <th>Nums</th>
      </tr>
    </thead>
    <tbody ng-repeat='item in data'>
        <td class="spanRows" rowspan="{{item.nums.length}}">{{item.name}}</td>
    <td>
    <table>
      <tbody>
        <tr ng-repeat='num in item.nums'>
          <td class="tdcell">{{num}}</td>
        </tr>
      </tbody>
    </table>
    </td>
        </tbody>
</table>
</div>

AngularJS 使用 RowSpan 在 table 中生成分组数据

AngularJS to generate grouped data in a table using RowSpan

javascript

angularjs

html-table

ng-repeat