Using angularjs, I implemented ng-repeat to display details in a table. In the final column, I aim to display the glyphicon 'glyphicon glyphicon-stop' in a specific color.
<tr ng-repeat="ps in $ctrl.personLst">
<td>{{ ps.id}}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.age }}</td>
<td>{{ ps.country }}</td>
<td>{{ ps.continent }}</td>
<td> //TODO <td>
.color-green {
color: green;
}
.color-blue {
color: yellow;
}
.color-red {
color: red;
}
- RED
- Age over 30, Country 'GER', and Continent 1
- BLUE
- Age under 30, Country 'RS', and Continent 1
- GREEN
- Age under 10, Country 'TS', and Continent 3
Is it possible to achieve this? Here is my latest attempt:
<td><span class="glyphicon glyphicon-stop" ng-class="{'color-red': ps.age > 30 && ps.country === 'GER' && ps.continent === 1}" ></span></td>