I have been attempting to utilize the ng-class directive in AngularJS based on a certain condition: if a JSON value is 1, it should display as green; if it's 2, red; and if it's 0, white. However, I am unable to achieve the desired result for some reason. To better understand the issue, here is a link to my code on JSFiddle:
https://jsfiddle.net/0xsv2aq3/42/
Any assistance with this matter would be greatly appreciated. Thank you.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<script>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.schedule =
{
"days": [
{
"day": "2018-12-09T00:00:00",
"entries": [
{
"name": "Adam D",
"value": 1,
"parts": [
"EG"
]
},
...
]
},
...
}
}
</script>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table" border=1>
<thead>
<tr>
<th>Name</th>
<th ng-repeat=" x in schedule.days" scope="col">{{x.day}}</th>
</tr>
</thead>
<style>
.red{background-color: red;}
.white{background-color: white;}
.green{background-color: green;}
</style>
<tbody>
<tr ng-class="{'red': day.entries[$parent.$index].value === 1, 'green': day.entries[$parent.$index].value === 2, 'white': day.entries[$parent.$index].value === 0}" ng-repeat="day1 in schedule.days[0].entries" scope="row">
<td>{{day1.name}}</td>
<td ng-repeat="day in schedule.days">{{day.entries[$parent.$index].parts[0]}}>{{day.entries[$parent.$index].value}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>