angularjs 다차원 배열 데이터 바인딩

Question

anglejs를 사용하여 다차원 배열 [matrix]을 기반으로 입력 양식에 & 바인딩 값을 표시하려고합니다. 이것은 내가

function getMatrix(rows, cols, defaultValue){ 
    var arr = new Array(rows); 
    for (var i = 0; i < rows; i++) { 
    arr[i] = new Array(cols); 
    for (var j = 0; j < cols ; j++) { 
     if(defaultValue !== null){ 
     arr[i][j] = defaultValue; 
     } 
     else{ 
     arr[i][j] = {"value":i+"-"+j}; 
     } 
    }; 
    }; 
    return arr; 
} 

$scope.data = getMatrix(3,3,getMatrix(2,3,null)); 

을 결과를 저장하기위한 배열과 변수를 생성하는 데 사용할 JS 기능이며, 여기에 표시하는 데이터

<table> 
<tr ng-repeat="row in data"> 
    <td ng-repeat="cell in row track by $index"> 
    <table> 
     <tr ng-repeat="deepRow in cell"> 
     <td ng-repeat="deepCell in deepRow track by $index"> 
      <input type="text" style="width: 20px;" ng-model="deepCell.value"> 
     </td> 
     </tr> 
    </table> 
    </td> 
    </tr> 
</table> 

내가 정상 NXN 배열의 & 바인딩을 표시 할 때, 모든 선한 일에 대한 HTML 테이블의 ,하지만 & 중첩 된 다 중 배열을 바인딩하려고하면 예상대로 작동하지 않습니다. 깊은 배열의 값을 변경하면 같은 행의 값도 변경됩니다.

여기 plunker의 코드가 있습니다. Multidimentional Array Binding

여기에 뭔가가 있습니까?

Answer 1

두 번째 인수를 getMatrix (1, 1, null)로 변경하면 문제가 조명됩니다. 이것은 배열의 요소가 항상 동일하다는 것을 매우 명확하게 보여줍니다. 물론 그것은 기본 값이라고했습니다.

이 문제를 방지하려면 모든 셀에 대해 getMatrix (2, 3, null)을 호출해야합니다. 따라서 defaultValue는 기본값을 대신 생성하는 함수 여야합니다. 이것이 그 방법 중 하나입니다.

http://plnkr.co/edit/oPCBOcfBiAxwtwNhr6vp?p=preview

// Code goes here 
angular.module('MatrixApp', []) 
.controller('MatrixCtrl', ['$scope', 
    function($scope) { 

    function getMatrix(rows, cols, defaultValueFn){ 
     var arr = new Array(rows); 
     for (var i = 0; i < rows; i++) { 
     arr[i] = new Array(cols); 
     for (var j = 0; j < cols ; j++) { 
      if(defaultValueFn !== null){ 
      arr[i][j] = defaultValueFn(); 
      } 
      else{ 
      arr[i][j] = {"value":i+"-"+j}; 
      } 
     }; 
     }; 
     return arr; 
    } 
    var defaultX = 3; 
    var defaultY = 2; 
    var defaultVal = null; 
    $scope.matrixDefaultFn = function() { 
     return getMatrix(defaultX, defaultY, defaultVal) 
    } 
    $scope.data = getMatrix(3,3, $scope.matrixDefaultFn); 
    } 
]); 

: 당신의 plunkr의 편집을 참조하십시오