AngularJS を使用してスプレッドシート タイプのアプリを作成しています。このアプリは CSV ファイルを取得して解析し、正規表現でフィルター処理してからデータを出力します。ただし、データは色分けされています。
最初の色付けは、すべてのデータの配列をくまなく調べて、「赤」または「青」の正規表現に一致する要素を見つけることによって行われます。一致する場合は、'red' または 'blue' 配列にプッシュされます。次に、関数がスプレッドシートの作成と並行して実行され、セル要素が「赤」または「青」の場合、関数は「赤」または「青」を返し、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