I wanted to change background colors of specific tr depending on the database values that it returns:
html file
...
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" ng-class="{'D6-class': data.Dag === '6', 'D7-class': data.Dag === '7', 'P2-class': data.Periode === '2' && (data.Dag=='1' || data.Dag =='2' || data.Dag=='4' || data.Dag =='5'), 'D3-class': data.Periode === '2' && data.Dag =='3', 'P3-class': data.Periode === '3' && (data.Dag=='1' || data.Dag =='2'|| data.Dag=='3' || data.Dag=='4' || data.Dag =='5'), 'P4-class': data.Periode === '4' && (data.Dag=='1' || data.Dag =='2'|| data.Dag=='3' || data.Dag=='4' || data.Dag =='5')}">
<td align="center">{{data.Locatie}}</td>
<td align="center">{{data.Periode}}</td>
<td align="center">{{data.Dag}}</td>
<td align="center">{{data.Dienst}}</td>
<td align="center">{{data.Delen}}</td>
<td align="center">{{data.Start1}}</td>
<td align="center">{{data.Eind1}}</td>
<td align="center">{{data.Start2}}</td>
<td align="center">{{data.Eind2}}</td>
<td align="center">{{data.Vanaf}}</td>
</tr>
...
CSS
...
.D7-class{
background-color: #FABEAA;
}
.D3-class{
background-color: #FAF9AA;
}
.P2-class{
background-color: #FFFFFF;
}
.P3-class{
background-color: #BEFAAA;
}
.P4-class{
background-color: #C390D4;
}
...
Now the most part works great. It looks at the data it got from the database, but not every <tr> is changed like it should. If I select all lines for only like D3 (Yellow) it shows 1 line yellow and other one white. Is there a way to avoid this? All rows should be yellow.
