使用JavaScript和CSS按类为HTML标记着色

我正在用表格单元格和AngularJS创建一个电子表格类型的程序，我想根据用户上传的文件给我的输入单元格上色

我有一个数组，其中包含我迭代过的所有用户数据，在与一些正则表达式进行匹配之前，一些数据被推送到“红色数组”和“蓝色数组”中。然后，我有一个函数，当原始数组的信息被放入电子表格时，它将被调用。此函数检查要放置的信息是否位于红色或蓝色数组中，然后将输入框涂成红色或蓝色（如果未找到匹配项，则为绿色） 这个着色函数应该返回一个字符串，该字符串可以用作输入标记的id或类，在CSS中，它根据返回的名称为标记着色

然而，我似乎无法找出正确的方法来为输入标记着色。我的输入框保持默认的白色

<script>
...

var blue = ["blue1","blue2","blue3"];
var red = ["red1","red2","red3"];
var allData = [["red1","misc1","misc2"],["blue1","blue2","blue3"],["red2","red3","misc3"]];

var makeColors = function(data){
    if( data in red){
        return "red";
    }
    else if( data in blue){
        return "blue";
    }
    else{
        return "green";
    }
};

//creates the spreadsheet       
sheet= function($scope, $parse){
$scope.columns = ["col1","col2","col3"]
$scope.rows = allData.length;
$scope.cells = {};
$scope.values = allData;
};
</script>

<div ng-app ng-controller="sheet">
    <center><table>
        <tr class="column-label">
            <td ng-repeat="column in columns">{{column}}</td>
        <tr ng-repeat="value in values">
            <td class="row-label" ng-repeat="data in value">
                <div id="{{data}}">
                    <input type="text" value="{{data}}" class="makeColors({{data}})">
                </div>
            </td>
        </tr>
    </table></center>
</div>

<style>

input{
    font-size: 10pt;
    position: absolute;
    height: 1.2em;
    height: 14pt;
    overflow: hidden;
    padding-left: 4pt;
    border: none;
    width: 80px;
}

table{
    border-collapse: collapse;
}
td > div {
    height:16pt;
    width:2px;
}
td {
    border: 1px solid #0EE;
    width:85px;

}
.column-label >td, .row-label{
    text-align:center;
    background: #EEE;
}
.row-label {
    width: 2em;
}
input.red{
    background-color: red;
}
input.blue{
    background-color: blue;
}
input.green{
    background-color: green;
}

</style>

...
var blue=[“blue1”、“blue2”、“blue3”]；
变量red=[“red1”、“red2”、“red3”]；
var allData=[“red1”、“misc1”、“misc2”]、[“blue1”、“blue2”、“blue3”]、[“red2”、“red3”、“misc3”]；
var makeColors=函数（数据）{
if（红色数据）{
返回“红色”；
}
else if（蓝色数据）{
返回“蓝色”；
}
否则{
返回“绿色”；
}
};
//创建电子表格
sheet=函数（$scope$parse）{
$scope.columns=[“col1”、“col2”、“col3”]
$scope.rows=allData.length；
$scope.cells={}；
$scope.values=所有数据；
};
{{column}}
输入{
字号：10pt；
位置：绝对位置；
高度：1.2米；
高度：14磅；
溢出：隐藏；
左：4吨；
边界：无；
宽度：80px；
}
桌子{
边界塌陷：塌陷；
}
td>div{
高度：16磅；
宽度：2倍；
}
运输署{
边框：1px实心#0EE；
宽度：85px；
}
.列标签>td..行标签{
文本对齐：居中；
背景：#EEE；
}
.行标签{
宽度：2米；
}
输入。红色{
背景色：红色；
}
输入。蓝色{
背景颜色：蓝色；
}
绿色输入{
背景颜色：绿色；
}

您的问题在这一行：

class=“makeColors（{{data}}）”

你不能那样做。这里有一个小提琴，我用map（）来解决它：

---

为了进一步解释这个问题，{{}之外的代码不是通过angular执行的（我指的是

makeColors（

part），即使是这样，这也不是执行javascript函数的正确方法。

这正是我需要的！非常感谢。