我正在使用AngularJS创建一个电子表格类型的应用程序,它需要一个CSV文件,解析它,用一些正则表达式过滤它,然后输出数据。但是,数据是用颜色编码的。
初始着色是通过梳理所有数据的数组,并找到与“红色”正则表达式或“蓝色”正则表达式匹配的元素来完成的。如果匹配,则将其推入“红色”或“蓝色”数组。然后,函数与电子表格的创建一起运行,如果单元格元素为“红色”或“蓝色”,则该函数返回“红色”或“蓝色”,该单元使用CSS将单元格的颜色着色为单元格。所有其他单元格默认为绿色。
该着色功能映射到电子表格中屏幕上写入的数据。因此,如果写入浏览器,值的示例将如下所示:
{'content':"Red Box", 'color':"red"}
我将电子表格的输入标记绑定到其中的内容。但是,我似乎无法改变内容的颜色。我想知道如何更改颜色(通过函数),因为我需要在用户的输入上运行正则表达式,以了解更改框的颜色。下面你会看到颜色实际上映射到makeColor
函数的输出。当数据发生变化时,我不需要使用该功能。我计划为此制作不同的功能。
以下是一些代码:
<script>
...
sheet= function($scope, $parse){
$scope.columns = headers;
$scope.rows = allData.length;
$scope.cells = {};
$scope.values = allData.map(function(c,row){
return c.map(function(data){
return {
content: data,
color: makeColors(data)
};
});
});
$scope.change = function(data){
console.log("A change was made!");
};
};
</script>
<div ng-app ng-controller="sheet">
<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>
<input type="text" id="inputValue" ng-model="data.content" class="{{data.color}}"
ng-change="change(this.value)" ng-change="data.color='red'" colorize="colorize">
</div>
</td>
</tr>
</table>
</div>
所以也许一个更通用的问题会更好:
如果$scope
中的某个对象映射到多个内容,那么我如何根据ng-change
代码的input
方法更改或访问更改中的多个内容?