Question

今天我对AngularJS有一个有趣的问题，我想我会发布：

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

一旦功能完成，有线连接发生了。不是更新所选单元格的值，而是在当前位置插入一个新单元格，单元格向右移动，最后一个单元格从行中移除。显然，我原本期望细胞保持其当前位置，只更新子元素。

以下是我的代码的简短示例。模特：

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

HTML代码段：

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

Answer 1

原来这个行为是因为我直接写了模型对象。所以我稍微更改了模型以包含对象，我将值写入对象成员。新模型看起来像这样：

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

在HTML片段中，我将表达式更改为：

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

在监视功能中：

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

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

1 个答案: