Question

我想要展示＆amp;使用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>

当我展示＆amp;在正常的n x n数组中绑定，一切都很好，但当我尝试创建＆amp;绑定嵌套的multidimentional数组，它不能按预期工作。当我在深层数组中更改值时，同一行的值也会改变。

这是关于plunker的代码。 Multidimentional 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多维数组数据绑定

1 个答案: