设置文本输入字段的初始值而不触发ng-change

Question

该场景是一个带有JavaScript和AngularJS的数独游戏。

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

updateValue(sudokuMatrix, row, col, val)函数将矩阵sudokuMatrix中位置行row和column col的字段更改为值val 。

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

我想要做的是将矩阵的每个字段显示为HTML中的<input type="text">字段。 我希望所有字段最初都设置为矩阵中的值。 如果更改了文本字段的输入，我希望在$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对象中的值。

我面临的问题是

如果我更改输入字段中的值， matrix应更新该值。 我可以使用ng-change="updateValue(matrix, rowIndex, colIndex, inputVal)" 。
为了能够通过ng-change范围中的matrix ，我需要一个ng-model ，它将字段的输入绑定到变量： ng-model="inputVal"
如果我添加这两行，则输入字段不会使用作用域的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>

Answer 2

你可以试试这段代码看看，我只用输入标签中的ng-value属性替换了你的value属性，如下所示，

 <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> </head> <body ng-controller="TestController"> <div ng-repeat="(rowIndex,row) in matrix track by $index"> <input type="text" size="1" ng-value="getMatrixVal(rowIndex, colIndex)" ng-model="inputVal" ng-change="updateValue(matrix, rowIndex, colIndex, inputVal)" ng-repeat="(colIndex,col) in row track by $index"> </div> <script> angular.module('app', []); angular.module('app').config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]); function emptyRow() { return [0, 0, 0, 0, 0, 0, 0, 0, 0]; } function emptyMatrix() { var sudokuMatrix = []; for (var i = 0; i < 9; i++) { sudokuMatrix[i] = emptyRow(); } return sudokuMatrix; } function updateValue(sudokuMatrix, row, col, val) { row = parseInt(row); col = parseInt(col); val = parseInt(val); sudokuMatrix[row][col] = val; } function exampleMatrix() { matrix = emptyMatrix(); updateValue(matrix, 0, 2, 6); updateValue(matrix, 0, 3, 3); updateValue(matrix, 0, 4, 2); updateValue(matrix, 1, 2, 1); updateValue(matrix, 1, 5, 5); updateValue(matrix, 1, 6, 3); updateValue(matrix, 1, 7, 6); updateValue(matrix, 2, 0, 9); updateValue(matrix, 2, 1, 4); updateValue(matrix, 2, 3, 6); updateValue(matrix, 3, 2, 4); updateValue(matrix, 4, 0, 8); updateValue(matrix, 4, 1, 7); updateValue(matrix, 4, 3, 1); updateValue(matrix, 4, 4, 3); updateValue(matrix, 4, 5, 4); updateValue(matrix, 4, 7, 5); updateValue(matrix, 4, 8, 6); updateValue(matrix, 5, 6, 1); updateValue(matrix, 6, 5, 9); updateValue(matrix, 6, 7, 4); updateValue(matrix, 6, 8, 7); updateValue(matrix, 7, 1, 1); updateValue(matrix, 7, 2, 7); updateValue(matrix, 7, 3, 5); updateValue(matrix, 7, 6, 2); updateValue(matrix, 8, 4, 7); updateValue(matrix, 8, 5, 2); updateValue(matrix, 8, 6, 5); return matrix; } function TestController($scope) { $scope.matrix = exampleMatrix(); $scope.updateValue = updateValue; $scope.getMatrixVal = function(row, col) { return $scope.matrix[row][col]; }; } </script> </body> </html>

代码片段在这里不起作用，因为它似乎不接受我指定的角度js的版本，但其余的代码运行良好。

您可以尝试使用小提琴中的ng-value属性替换value属性并尝试

设置文本输入字段的初始值而不触发ng-change

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-11-19 11:49:19

解决方案2
1 2016-11-19 13:22:56

设置文本输入字段的初始值而不触发ng-change

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-11-19 11:49:19

解决方案2 1 2016-11-19 13:22:56

解决方案1
2 已采纳 2016-11-19 11:49:19

解决方案2
1 2016-11-19 13:22:56