更新表格的AngularJS模型插入新单元格并删除另一个答案

【问题标题】：Updating AngularJS Model of table inserts new cell and removes another更新表格的AngularJS模型插入新单元格并删除另一个
【发布时间】：2013-07-23 07:44:00
【问题描述】：

我今天遇到了一个关于 AngularJS 的有趣问题，我想我会发布：

在我的应用程序中，我有一个模型，我使用 ng-repeat 从该模型中创建了一个 HTML 表，此外，我还有一个与另一个模型相关联的输入字段，并且我已向该模型注册了一个监视功能。当我在输入字段中输入一些文本时，该函数会将该文本写入当前选定的表格单元格中。

一旦函数完成，一些连线的事情就发生了。不是更新选定单元格的值，而是在当前位置插入一个新的单元格，单元格向右移动，最后一个单元格从行中删除。显然，我希望单元格保持其当前位置，并且仅更新子元素。

这是我的代码的一个简短示例。型号：

//The model is initialized with empty strings, later the input is supplied by the user
$scope.master.rows = [["", "", ""], ["", "", ""], ["", "", ""]];

HTML sn-p：

<table ng-model="master.rows">
    <tr ng-repeat="row in master.rows">
        <td ng-repeat="col in row"
            ng-click="master.click($event.target)">{{ col }}</td>
    </tr>
</table>

当 click 函数执行时，当前单元格被设置在范围内，这样 watch 函数可以从中检索 x 和 y 索引并使用它来更新模型：

$scope.$watch("master.attributes", function (value) {
    var x = $scope.master.current[0].cellIndex;
    var y = $scope.master.current[0].parentNode.rowIndex;
    $scope.master.rows[y][x] = value;
});

【问题讨论】：

标签： angularjs

【解决方案1】：

事实证明，这种行为是因为我直接写入模型对象。因此，我稍微更改了模型以包含对象，并将值写入对象成员。新模型如下所示：

$scope.master.rows = [[{value: ""}, {value: ""}, {value: ""}],
                      [{value: ""}, {value: ""}, {value: ""}],
                      [{value: ""}, {value: ""}, {value: ""}]
                     ];

在 HTML sn-p 中，我将表达式更改为：

<td ng-repeat="col in row" ng-click="master.click($event.target)">{{ col.value }}</td>

在手表功能中：

$scope.master.rows[y][x].value = value;

【讨论】：