javascript - 在不触发 ng-change 的情况下设置文本输入字段的初始值

Question

该场景是一个使用 JavaScript 和 AngularJS 的数独游戏。

数独字段是数组(列)的数组(行)。所有数组的长度都是 9。我将这个数独字段命名为 matrix .函数 exampleMatrix()返回这样一个已经填充了一些字段的矩阵。

安updateValue(sudokuMatrix, row, col, val)函数更改位置行 row 处的字段和列 col在矩阵中sudokuMatrix到值 val .

function TestController($scope) {
    $scope.matrix = exampleMatrix();
    $scope.updateValue = updateValue;
    $scope.getMatrixVal = function getMatrixVal(row, col) {
        return $scope.matrix[row][col];
    };
}

我想做的是将矩阵的每个字段显示为 <input type="text"> HTML 中的字段。我希望所有字段最初都设置为它们在矩阵中的值。如果更改文本字段的输入，我希望在 $scope.matrix 中更新值对象。

我可以使用以下 HTML/AngularJS 代码毫无问题地使用矩阵的值填充字段:

<div ng-repeat="(rowIndex,row) in matrix track by $index">
    <input type="text" size="1" value="{{col}}"
           ng-repeat="(colIndex,col) in row track by $index">
</div>

但我无法更新 $scope.matrix 中的值当然，对象还没有。

我面临的问题是

1. 如果我更改输入字段中的值，matrix应该更新那个值。我可以用 ng-change="updateValue(matrix, rowIndex, colIndex, inputVal)" 做到这一点.
2. 为了能够改变matrix在 ng-change 的范围内, 我需要一个 ng-model ，它将字段的输入绑定(bind)到一个变量:ng-model="inputVal"
3. 如果我添加这两行，输入字段最初不会用 matrix 中的值填充范围的对象。

当前代码如下所示:

<div ng-repeat="(rowIndex,row) in matrix track by $index">
    <input type="text" size="1" value="{{getMatrixVal(rowIndex, colIndex)}}"
           ng-model="inputVal"
           ng-change="updateValue(matrix, rowIndex, colIndex, inputVal)"
           ng-repeat="(colIndex,col) in row track by $index">
</div>

我的猜测是，当网站生成时，ng-model将输入字段的空值分配给 inputVal , 那ng-change立即被触发。因此，矩阵的每个字段都将填充一个空值。 AngularJS 没有抛出任何错误，所以我不能确定。无论如何，我在这里不知所措，不知道如何获得最初写入字段的初始值和ng-change。仅在之后调用。我感谢每一个帮助。

JSFiddle:https://jsfiddle.net/30xkedmp/

JavaScript:http://pastebin.com/8cge8BXs HTML: http://pastebin.com/X0YUPU4h

Answer 1

你为什么不直接使用

<div ng-repeat="(rowIndex,row) in matrix track by $index">
    <input type="text" size="1" ng-model="matrix[rowIndex][colIndex]"
           ng-repeat="(colIndex,col) in row track by $index">
</div>

代替

<div ng-repeat="(rowIndex,row) in matrix track by $index">
    <input type="text" size="1" value="{{getMatrixVal(rowIndex, colIndex)}}"
           ng-model="inputVal"
           ng-change="updateValue(matrix, rowIndex, colIndex, inputVal)"
           ng-repeat="(colIndex,col) in row track by $index">
</div>