ng-repeat on tr
Trying to build a directive but want to use ng-repeat with table rows
by octavioamu
HTML
<div ng-controller="MyCtrl">
<table cellspacing="0" id="tech-companies">
<thead>
<tr>
<th></th>
<th colspan="2">Segunda</th>
<th colspan="2">Terça</th>
<th colspan="2">Quarta</th>
<th colspan="2">Quinta</th>
<th colspan="2">Sexta</th>
<th colspan="2">Sabado</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1ª aula</td>
<td colspan="2" class="materia" data-time="{{row.timein}} {{row.timeout}}" ng-repeat="phone in phones"> {{row.materia}} </td>
</tr>
<tr class="professor">
<td colspan="2" data-email="{{row.email}}" class="email" ng-repeat="phone in phones">{{row.professor}}</td>
</tr>
<tr>
<td>Sala</td>
<td class="sala">{{row.sala}}</td>
</tr>
<tr ng-repeat="row in chartdata">
<td> {{row.materia}}</td>
<td> {{row.professor}}</td>
<td> {{row.tradeTime}}</td>
<td> {{row.change}}</td>
<td> {{row.prevClose}}</td>
<td> {{row.open}}</td>
<td> {{row.bid}}</td>
<td> {{row.ask}}</td>
</tr>
<tr ng-repeat="row in chartdata"><td> {{row.yTargetEst}} {{row.yTargetEst}}</td></tr>
</tbody>
</table>
</div>
CSS
/* Styles for the tables test page */
/* Test page styles */
.docs {
margin: 3% 5%;
font-size: 1.2em;
}
.docs h3 {
font-size: 1.2em;
font-weight: bold;
margin: .5em 0;
}
.docs p {
margin: 0 0 1em;
}
body {
font: 62.5%/1.3 Helvetica, sans-serif;
}
.a11y-only {
position: absolute;
left: -999em;
}
.table-wrapper {
position: relative;
margin: 5em 5%;
}
.table-menu-wrapper {
position: absolute;
top: -3em;
right: 0;
}
.table-menu {
position: absolute;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
font-size: 1.2em;
width: 12em;
right: 0;
left: auto;
}
.table-menu-hidden {
left: -999em;
right: auto;
}
.table-menu-btn {
text-decoration: none;
color: #333;
font-size: 1.2em;
background: #eee url(../_img/icon-menu.png) no-repeat 5px center;
padding: .3em 10px .3em 20px;
border: 1px solid #ccc;
}
.table-menu li {
padding: .3em 0;
}
/* Table styles */
table {
width: 100%;
font-size: 1.2em;
}
thead th {
white-space: nowrap;
border-bottom: 1px solid #ccc;
color: #888;
}
th, td {
padding: .5em 1em;
background-color: #fff;
text-align: right;
}
th:first-child,
td:first-child {
text-align: left;
}
tbody th, td {
border-bottom: 1px solid #e6e6e6;
}
.co-name {
display: block;
font-size: .9em;
opacity: .4;
}
.enhanced th,
.enhanced td {
display: none;
}
.legacy-ie .enhanced th.essential,
.legacy-ie .enhanced td.essential {
display: inline;
}
.enhanced th.essential,
.enhanced td.essential {
display: table-cell;
}
@media screen and (min-width: 500px) {
.legacy-ie .enhanced th.optional,
.legacy-ie .enhanced td.optional {
display: inline;
}
.enhanced th.optional,
.enhanced td.optional {
display: table-cell;
}
}
@media screen and (min-width: 800px) {
.legacy-ie .enhanced th,
.legacy-ie .enhanced td {
display: inline;
}
.enhanced th,
.enhanced td {
display: table-cell;
}
}
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var tempData =
[{
materia: "Seminário",
timein: "12:12PM",
timeout: "12:00",
professor: "Ana Paula",
email: "[email protected]",
sala: "12:12PM"
},
{
materia: "Seminário",
timein: "12:12PM",
timeout: "12:00",
professor: "Ana Paula",
email: "[email protected]",
sala: "12:12PM"
}];
$scope.chartdata = tempData;
}