If I have the following data structure:
data = [{"nums": [1, 6, 5], "name": "John"},
{"nums": [2], "name": "Bob"},
{"nums": [9, 6], "name": "Jason"}]
And I want it to output to html using ng-repeat as:
|------------|
| 1 | |
|---| |
| 6 | John |
|---| |
| 5 | |
|---|--------|
| 2 | Bob |
|---|--------|
| 5 | |
|---| Jason |
| 2 | |
|---|--------|
How might I do that?
You could use the ng-repeat on tbody and then continue the loop down like this
<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
Try this :
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>