angularjs多维数组数据绑定

Question

我想使用 angularjs 在基于多维数组 [matrix] 的输入表单上显示和绑定值。这是我用来生成数组和变量以保存结果的js函数

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

这里是 html table 用于显示数据

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

当我在普通 n x n 数组中显示和绑定时，一切正常，但是当我尝试创建和绑定嵌套多维数组时，它没有按预期工作。当我更改深度数组中的值时，同一行的值也会更改。

这是 plunker 的代码。 Multidimensional Array Binding

我是不是漏掉了什么？

Answer 1

如果将第二个参数更改为 getMatrix(1, 1, null)，问题将会得到解决。这非常清楚地向您表明数组中的元素始终相同。当然是，你说是默认值

为防止出现此问题，您需要为每个单元格调用 getMatrix(2, 3, null)。所以也许 defaultValue 应该是一个产生默认值的函数。这是一种方法。查看您对 plunkr 的编辑：

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);
  }
]);

angularjs多维数组数据绑定

angularjs multidimensional array data binding

data-binding

matrix

angularjs