angularjs多维数组数据绑定答案

【问题标题】：angularjs multidimensional array data bindingangularjs多维数组数据绑定
【发布时间】：2015-01-01 13:23:25
【问题描述】：

我想使用 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>
 <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

我在这里遗漏了什么吗？

【问题讨论】：

标签： angularjs matrix data-binding

【解决方案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);
  }
]);

【讨论】：