在AngularJS中绑定和更改映射对象

时间:2013-07-10 19:15:52

标签: javascript angularjs angularjs-scope

我正在使用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方法更改或访问更改中的多个内容?

0 个答案:

没有答案