0

テーブル セルと 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>
4

1 に答える 1

1

あなたの問題はこの行にあります：

class="makeColors({{data}})"

そんなことはできません。これは、map() を使用して解決するフィドルです: http://jsfiddle.net/W5aED/

問題をさらに説明するために、 {{ }} の外側のコードは angular (makeColors(部分を意味します) によって実行されません。

于 2013-07-02T21:49:15.830 に答える