ng 변경을 트리거하지 않고 텍스트 입력 필드의 초기 값을 설정하십시오.

시나리오는 JavaScript 및 AngularJS가있는 Sudoku 게임입니다.ng 변경을 트리거하지 않고 텍스트 입력 필드의 초기 값을 설정하십시오.

스도쿠 필드는 배열 (열)의 배열 (행)입니다. 모든 배열의 길이는 9입니다.이 스도쿠 필드 이름은 matrix입니다. exampleMatrix() 함수는 이미 일부 필드가 채워진 행렬을 반환합니다.

updateValue(sudokuMatrix, row, col, val) 함수 값 val에 매트릭스 sudokuMatrix에 위치 로우 및 칼럼 rowcol에서 필드를 변경한다. 내가 원하는 무엇

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를 변경 가능하도록하기 위해
, I는 변수 필드의 입력을 결합하는 ng-model을 필요 I는 두 라인을 추가하는 경우 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/

자바 스크립트 : http://pastebin.com/8cge8BXs는 HTML : http://pastebin.com/X0YUPU4h

출처

2016-11-19 GeckStar

이 그것을 테스트하기 쉽게 될 수 있도록 당신이 당신의 코드를 배포 한 URL을 공유 할 수있을 것입니다 시도 할 수 있습니다? – GraveyardQueen

게시물 끝에 코드 링크가 추가되었습니다. 그래도 온라인으로 배포하지 않았습니다. 죄송합니다. – GeckStar

바이올린을 만들면 쉽게 될 것입니다. https://jsfiddle.net/ – karman

왜 당신은 당신이 코드를 시도 할 수 있습니다

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

출처

2016-11-19 11:49:19

생각조차하지 않아서 깨끗하게 해줍니다. 그러나 입력 필드에 쓰는 값이 컨트롤러의 행렬을 업데이트하지 못하는 문제가 여전히 있습니다. – GeckStar

ng-model은 양방향 바인딩이므로 제어기 값을 변경할 때보기를 변경하고보기를 업데이트 할 때 컨트롤러의 값을 업데이트합니다. –

정말 죄송합니다. 내 코드에 문제가 생겼다. 입력 된 String을 int에 'updateValue (...)'메소드로 파싱했기 때문에, 이제는 ng-model을 사용하여 쉽게 할 수 없다. 변경 사항을 확인하는 방식으로 문자열을 인식하지 못했고 값이 등록되지 않은 것처럼 보였습니다. 어쨌든, 당신은 절대적으로 옳았으며이 코드는 다른 옵션보다 더 간단합니다 (귀하의 답변은 첫 번째 옵션이었습니다). 그래서 투표를 변경했습니다. – GeckStar

사용합니까 그리고 봐라, 아래 그림과 같이 나는 단지

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

코드 조각이 여기에 작동하지 않습니다 그것을 받아들이는 것 같지 않기 때문에, 입력 태그의 NG-value 속성을 사용하여 값 속성을 대체했다 각도 js의 버전이 지정되었지만 나머지 코드는 제대로 작동합니다.

당신은 당신의 바이올린에 NG-value 속성에 의해 값의 속성을 교체 시도하고

출처

2016-11-19 13:22:56 GraveyardQueen

지시어가 있어야한다는 것을 알고 있어야합니다. 그게 바로 제가 찾던 것입니다, 감사합니다! 같은 문제를 겪고있는 사람에게는이 스레드에 더 많은 정보가 있습니다. https://stackoverflow.com/questions/23865608/what-is-the-difference-between-value-attribute-and-ng-value-attributes-in - – GeckStar

실제로 ng-value 대신 ng-model을 사용할 수 있지만, 여기서 너무 많은 코드를 사용하면 ng-change, getMatrixVal 함수 또는 " inpuVal "변수. 아래의 주석에서 언급했듯이 ng-model 지시어는 양방향 바인딩이므로 컨트롤러 변수를 자동으로 업데이트합니다.) 이 질문을보십시오 : http://stackoverflow.com/questions/28717523/whats-the-difference-between-ng-model-and-ng-value –

ng 변경을 트리거하지 않고 텍스트 입력 필드의 초기 값을 설정하십시오.

답변

관련 문제