Question

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

Sudoku字段是数组（列）的数组（行）。所有数组的长度均为9.我将此Sudoku字段命名为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];
    };
}

我想要做的是将矩阵的每个字段显示为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)"。
为了能够使用matrix更改范围中的ng-change，我需要一个ng-model，它将字段的输入绑定到变量：{{1} }
如果我添加这两行，则输入字段不会使用范围的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。因此，矩阵的每个字段都将填充空值。虽然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属性，如下所示，

＆＃13;

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

＆＃13;

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

您可以尝试用小提琴中的ng-value属性替换value属性，然后尝试

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

2 个答案: