var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data= [{
"NoClicks":
{ "C1": ["R1"],
"C2": ["R1"],
"C3": ["R1"]
},
"C1_R1_clicked":
{ "C1": ["R1", "R2"],
"C2": ["R1", "R2"],
"C3": ["R1", "R2"]
},
"C2_R1_clicked":
{ "C1": ["R1"],
"C2": ["R1", "R2"],
"C3": ["R1", "R2"]
}
,
"C3_R1_clicked":
{ "C1": ["R1"],
"C2": ["R1"],
"C3": ["R1", "R2"]
}
}]
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Nesting tables with AngularJSr</title>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h2>DEV table</h2>
<table class="table table-inverse">
<thead >
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
</tr>
</thead>
<tbody >
<!-- Can't figure out the syntax for looping through the colums -->
<tr ng-repeat="C in data.C2_R1_clicked">
<td ng-repeat="R in C"
rowspan="{{}}"> <!-- Gotta figure out a smart way to get the lenght of rows in next column -->
{{R}}
</td>
</tr>
</tbody>
</table>
<h2>Should be the result for NoClicks</h2>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
R1
</td>
<td>
R1
</td>
<td>
R1
</td>
</tr>
</tbody>
</table>
<h2>Should be the result for C1_R1_clicked</h2>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
R1
</td>
<td>
R1
</td>
<td>
R1
</td>
</tr>
<tr>
<td>
R2
</td>
<td>
R2
</td>
<td>
R2
</td>
</tr>
</tbody>
</table>
<h2>Should be the result for C2_R1_clicked</h2>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
R1
</td>
<td>
R1
</td>
<td>
R1
</td>
</tr>
<tr>
<td>
R2
</td>
<td>
R2
</td>
</tr>
</tbody>
</table>
<h2>Should be the result for C3_R1_clicked</h2>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
R1
</td>
<td rowspan="2">
R1
</td>
<td>
R1
</td>
</tr>
<tr>
<td>
R2
</td>
</tr>
</tbody>
</table>
</body>
</html>
/* Put your css in here */
.table>tbody>tr>td {
vertical-align: top;
}
.vertical-center {
vertical-align: center !important;
}