下面是一个使用AngularJS动态着色表格单元格的代码示例:
HTML代码:
姓名
分数
{{ student.name }}
{{ student.score }}
AngularJS代码:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.students = [
{ name: '张三', score: 80 },
{ name: '李四', score: 90 },
{ name: '王五', score: 70 },
{ name: '赵六', score: 60 }
];
$scope.getCellStyle = function(score) {
if (score >= 90) {
return { background: 'green' };
} else if (score >= 70) {
return { background: 'yellow' };
} else {
return { background: 'red' };
}
};
});
在上面的示例中,我们使用ng-repeat
指令来循环遍历学生列表,并使用ng-style
指令来根据学生的分数动态设置单元格的背景颜色。getCellStyle
函数根据学生的分数返回相应的CSS样式对象,从而实现了动态着色。
在这个示例中,分数大于等于90的单元格将被设置为绿色背景,分数大于等于70但小于90的单元格将被设置为黄色背景,分数小于70的单元格将被设置为红色背景。
您可以根据自己的需求来修改getCellStyle
函数中的条件和相应的样式。