AngularJS使用ROWSPAN

Question

生成表中的分组数据。如果我有以下数据结构：

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

而且我希望它输出使用NG-重复到HTML作为：

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

如何我可以这样做吗？

Answer 1

你可以使用在TBODY的NG-重复，然后继续循环下来这样

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

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