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

我有一个通过

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;
};  

<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>

我的HTML:

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;
};  

<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>

{{column}}

---

如您所见，我使用

$parent.$index

和

$index

值调用changeData函数，这些值允许我访问和更改初始数组。我不确定如何通过

$watch

执行此操作。您的$watch缺少它正在查看的值。没有它什么也做不了

但是为什么你要费这么大的劲来更新你的模型呢？将ng模型绑定到输入时，模型会自动更新

---

下面是一个plunker，显示了我将如何处理它：

我应该在警报中显示什么或打印到控制台以查看我的更新阵列？我尝试了allData，但它保持不变，sheet.$scope.Value未定义。我想我只是不明白什么在改变，以及改变后会发生什么。我看到它绑定到data.content，但这并没有做我注意到的任何事情。如果你注意到在我的plunker中，我在页面底部的一个块中输出饮料模型。如果您编辑任何饮料成分，您可以看到数据正在更新。我通常只是在视图中输出它，以便实时查看模型发生的更改。如果控制器中发生了更改，那么我将使用console.log。在您的情况下，您的模型将返回函数调用。使用实际数据构建一个复杂的JS对象可能更简单。因为它与输入绑定，所以您帮助我指出了正确的方向，通过

ng change

；但是，如何访问颜色或值中可能存在的任何其他字段？输入可以绑定到多个东西吗？我不知道你说的“访问”是什么意思。要输出它们吗？