我正在尝试在angularjs中应用ng类，条件是 json的值是1表示绿色，2表示红色，0表示白色。但是由于某种原因，我无法获得结果。如果您想更清楚地查看代码，我也有一个jsfiddle。
https://jsfiddle.net/0xsv2aq3/42/
任何帮助将不胜感激。谢谢
<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"
]
},
{
"name": "Chris S",
"value": 0,
"parts": []
},
{
"name": "Debbie J",
"value": 2,
"parts": []
},
{
"name": "Dennis S",
"value": 1,
"parts": [
"Lead"
]
},
{
"name": "Jamie W",
"value": 2,
"parts": []
},
{
"name": "Jen C",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Joe T",
"value": 1,
"parts": [
"Drums"
]
},
{
"name": "Karen B",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Kristene B",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Lisa R",
"value": 1,
"parts": [
"3rd"
]
},
{
"name": "Mike B",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Nancy S",
"value": 0,
"parts": []
},
{
"name": "Paul N",
"value": 2,
"parts": []
},
{
"name": "Scott J",
"value": 0,
"parts": []
},
{
"name": "Scott J",
"value": 2,
"parts": []
},
{
"name": "Trisha S",
"value": 0,
"parts": []
}
]
},
{
"day": "2018-12-16T00:00:00",
"entries": [
{
"name": "Adam D",
"value": 1,
"parts": [
"EG"
]
},
{
"name": "Chris S",
"value": 1,
"parts": [
"Keys 2"
]
},
{
"name": "Debbie J",
"value": 2,
"parts": []
},
{
"name": "Dennis S",
"value": 1,
"parts": [
"Lead"
]
},
{
"name": "Jamie W",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Jen C",
"value": 0,
"parts": []
},
{
"name": "Joe T",
"value": 1,
"parts": [
"Drums"
]
},
{
"name": "Karen B",
"value": 0,
"parts": []
},
{
"name": "Kristene B",
"value": 0,
"parts": []
},
{
"name": "Lisa R",
"value": 1,
"parts": [
"3rd"
]
},
{
"name": "Mike B",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Nancy S",
"value": 1,
"parts": [
"2nd"
]
},
{
"name": "Paul N",
"value": 1,
"parts": [
"3rd"
]
},
{
"name": "Scott J",
"value": 2,
"parts": []
},
{
"name": "Trisha S",
"value": 0,
"parts": []
}
]
},
{
"day": "2018-12-23T00:00:00",
"entries": [
{
"name": "Adam D",
"value": 1,
"parts": [
"EG"
]
},
{
"name": "Chris S",
"value": 0,
"parts": []
},
{
"name": "Debbie J",
"value": 2,
"parts": []
},
{
"name": "Dennis S",
"value": 1,
"parts": [
"Lead"
]
},
{
"name": "Jamie W",
"value": 0,
"parts": []
},
{
"name": "Jen C",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Joe T",
"value": 1,
"parts": [
"Drums"
]
},
{
"name": "Karen B",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Kristene B",
"value": 2,
"parts": []
},
{
"name": "Lisa R",
"value": 2,
"parts": []
},
{
"name": "Mike B",
"value": 2,
"parts": []
},
{
"name": "Nancy S",
"value": 0,
"parts": []
},
{
"name": "Paul N",
"value": 2,
"parts": []
},
{
"name": "Scott J",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Scott J",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Trisha S",
"value": 1,
"parts": [
"2nd"
]
}
]
},
{
"day": "2018-12-30T00:00:00",
"entries": [
{
"name": "Adam D",
"value": 1,
"parts": [
"EG"
]
},
{
"name": "Chris S",
"value": 1,
"parts": [
"Keys 2"
]
},
{
"name": "Debbie J",
"value": 2,
"parts": []
},
{
"name": "Dennis S",
"value": 1,
"parts": [
"Lead"
]
},
{
"name": "Jamie W",
"value": 0,
"parts": []
},
{
"name": "Jen C",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Joe T",
"value": 1,
"parts": [
"Drums"
]
},
{
"name": "Karen B",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Kristene B",
"value": 2,
"parts": []
},
{
"name": "Lisa R",
"value": 2,
"parts": []
},
{
"name": "Mike B",
"value": 2,
"parts": []
},
{
"name": "Nancy S",
"value": 1,
"parts": [
"2nd"
]
},
{
"name": "Paul N",
"value": 2,
"parts": []
},
{
"name": "Scott J",
"value": 2,
"parts": []
},
{
"name": "Trisha S",
"value": 0,
"parts": []
}
]
},
{
"day": "2019-01-06T00:00:00",
"entries": [
{
"name": "Adam D",
"value": 1,
"parts": [
"EG"
]
},
{
"name": "Chris S",
"value": 0,
"parts": []
},
{
"name": "Debbie J",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Dennis S",
"value": 1,
"parts": [
"Lead"
]
},
{
"name": "Jamie W",
"value": 0,
"parts": []
},
{
"name": "Jen C",
"value": 0,
"parts": []
},
{
"name": "Joe T",
"value": 1,
"parts": [
"Drums"
]
},
{
"name": "Karen B",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Kristene B",
"value": 2,
"parts": []
},
{
"name": "Lisa R",
"value": 1,
"parts": [
"3rd"
]
},
{
"name": "Mike B",
"value": 2,
"parts": []
},
{
"name": "Nancy S",
"value": 0,
"parts": []
},
{
"name": "Paul N",
"value": 2,
"parts": []
},
{
"name": "Scott J",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Trisha S",
"value": 0,
"parts": []
}
]
},
{
"day": "2019-01-13T00:00:00",
"entries": [
{
"name": "Adam D",
"value": 1,
"parts": [
"EG"
]
},
{
"name": "Chris S",
"value": 1,
"parts": [
"Keys 2"
]
},
{
"name": "Debbie J",
"value": 2,
"parts": []
},
{
"name": "Dennis S",
"value": 1,
"parts": [
"Lead"
]
},
{
"name": "Jamie W",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Jen C",
"value": 0,
"parts": []
},
{
"name": "Joe T",
"value": 1,
"parts": [
"Drums"
]
},
{
"name": "Karen B",
"value": 0,
"parts": []
},
{
"name": "Kristene B",
"value": 0,
"parts": []
},
{
"name": "Lisa R",
"value": 1,
"parts": [
"3rd"
]
},
{
"name": "Mike B",
"value": 0,
"parts": []
},
{
"name": "Nancy S",
"value": 1,
"parts": [
"2nd"
]
},
{
"name": "Paul N",
"value": 2,
"parts": []
},
{
"name": "Scott J",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Scott J",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Trisha S",
"value": 0,
"parts": []
}
]
},
{
"day": "2019-01-20T00:00:00",
"entries": [
{
"name": "Adam D",
"value": 1,
"parts": [
"EG"
]
},
{
"name": "Chris S",
"value": 1,
"parts": [
"Keys 2"
]
},
{
"name": "Debbie J",
"value": 2,
"parts": []
},
{
"name": "Dennis S",
"value": 1,
"parts": [
"Lead"
]
},
{
"name": "Jamie W",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Jen C",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Joe T",
"value": 1,
"parts": [
"Drums"
]
},
{
"name": "Karen B",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Kristene B",
"value": 0,
"parts": []
},
{
"name": "Lisa R",
"value": 0,
"parts": []
},
{
"name": "Mike B",
"value": 0,
"parts": []
},
{
"name": "Nancy S",
"value": 1,
"parts": [
"2nd"
]
},
{
"name": "Paul N",
"value": 2,
"parts": []
},
{
"name": "Scott J",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Scott J",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Trisha S",
"value": 0,
"parts": []
}
]
},
{
"day": "2019-01-27T00:00:00",
"entries": [
{
"name": "Adam D",
"value": 1,
"parts": [
"EG"
]
},
{
"name": "Chris S",
"value": 2,
"parts": []
},
{
"name": "Debbie J",
"value": 2,
"parts": []
},
{
"name": "Dennis S",
"value": 1,
"parts": [
"Lead"
]
},
{
"name": "Jamie W",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Jen C",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Joe T",
"value": 1,
"parts": [
"Drums"
]
},
{
"name": "Karen B",
"value": 0,
"parts": []
},
{
"name": "Kristene B",
"value": 1,
"parts": [
"Melody"
]
},
{
"name": "Lisa R",
"value": 0,
"parts": []
},
{
"name": "Mike B",
"value": 1,
"parts": [
"AG"
]
},
{
"name": "Nancy S",
"value": 2,
"parts": []
},
{
"name": "Paul N",
"value": 2,
"parts": []
},
{
"name": "Scott J",
"value": 2,
"parts": []
},
{
"name": "Trisha S",
"value": 1,
"parts": [
"2nd"
]
}
]
}
]
}
}
</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>
<!-- <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>
<tbody>
<tr ng-repeat=" item in schedule.days" scope="row">
<td ng-repeat="y in item.entries">{{y.value}}</td>
<td ng-repeat=" itm in item.parts">{{itm}}</td>
</tr>
</tbody>
</table>
</div>-->
</body>
</html>
答案 0 :(得分：0)
我将样式应用于tr标签而不是td。
'https://jsfiddle.net/omelsoft/xL35psco/5/'
这解决了我的问题
答案 1 :(得分：0)
我已经创建了一个自定义过滤器，用于将类应用于td
myApp.filter('color',function(){
return function(status){
console.log(status);
switch(status){
case 0:
return 'white';
break;
case 1:
return 'red';
break;
case 2:
return 'green';
break;
}
}
});
在td标签中添加过滤器
<td class="{{day.entries[$parent.$index].value | color}}" ng-repeat="day in schedule.days">{{day.entries[$parent.$index].parts[0]}}>{{day.entries[$parent.$index].value}}</td>