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

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

试试这个：

＆＃13;

＆＃13;

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"}];
});

＆＃13;

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

.tdcell {
  border:  0px;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;