我正在使用 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