使用AngularJS $ watch更改数组中的值

时间:2013-07-09 20:32:55

标签: javascript angularjs angularjs-scope

我有一个通过ng-repeat迭代的2D数组。这个数组实际上是我正在构建的电子表格应用程序的一部分,其中电子表格中的初始值是数组的初始值。我编写了一个函数,可以在用户更改输入值时更新此数组,但是,我被告知我需要使用$watch方法而不是onchange方法。

我真的被抛弃了,因为我不明白如何通过$watch方法更改初始数组的值。我看到它检测到了变化,但我希望它能够跟踪这一变化并实际改变初始数组。

这是我的Javascript,包括$watch方法的开头:

sheet= function($scope, $parse){
    $scope.columns = headers;
    $scope.rows = allData.length;
    $scope.cells = {};
    $scope.$watch(
        function() {console.log("Change!");},
    );
    $scope.values = allData.map(function(c,row){
        return c.map(function(data){
            return {
                content: data,
                model: null,
                color: makeColors(data)
            };
        });
    });
};

changeData = function(row, col, data){
    allData[row][col] = data;
};  

我的HTML:

<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}}" onchange="changeData({{$parent.$index}},{{$index}},this.value)">
                </div>

            </td>
        </tr>
    </table>
</div>

如您所见,我使用$parent.$index$index值调用changeData函数,这允许我访问和更改初始数组。我不确定如何通过$watch执行此操作。

1 个答案:

答案 0 :(得分:4)

你的$ watch缺少它正在观看的值。没有它,它将不会做任何事情。

但是你为什么要更新你的模型呢?将ng-model绑定到输入时,模型会自动更新。

这是一个关于我如何接近它的掠夺者:http://plnkr.co/edit/Oxu1NV?p=preview

相关问题