AngularJS：具有文本区域矩阵的双向数据绑定。 怎么做？

Question

我有一个矩阵，它基本上是整数数组的数组。 该矩阵的每个元素都在我的HTML文本区域上显示。

矩阵看起来像这样

$scope.matrix = [[1,2,3,4],[5,6,7,8]];

不知何故，我能够像使用适当的二维数组一样使用此矩阵。 如果我执行{{matrix [1] [2]}}，数字6将正确打印在屏幕上。

问题是，我想将文本区域绑定到此矩阵的每个元素上。

Java脚本

var mainapp = angular.module("mainApp",[]);
mainapp.controller("mainController",function($scope){

$scope.matrix=[[1,2,3,4],[5,6,7,8]];
});

的HTML

<div ng-app="mainApp" ng-controller="mainController">


<span ng-repeat="row in matrix track by $index"><br>
  <span ng-repeat="element in row track by $index">
    <textarea "rows="1" cols="1">{{element}}</textarea>
  </span>
</span>
</div>  

矩阵正确显示，应显示2行4列文本区域。

稍后，我希望能够对该矩阵执行各种操作，例如查找行列式，乘法等。 这些文本区域的更改应自动反映矩阵中的更改。 我该如何实现？

Answer 1

在每个元素上实现双向绑定的最简单，最常规的方法是在您的文本区域中添加一个与特定索引匹配的ng-model 。 它看起来像这样：

<textarea ng-model="matrix[$parent.$index][$index]" rows="1" cols="1"></textarea>

如果您从控制器更改值，则它将反映在视图中，反之亦然。

这是一个工作的家伙

Answer 2

您也可以将矩阵定义为对象数组，而不是基元（int）。

$scope.matrix=[
  [{value: 1}, {value: 2}, {value: 3}],
  [{value: 4}, {value: 5}, {value: 6}],
  [{value: 7}, {value: 8}, {value: 9}]
];

这样做将启用双向绑定。 如果您不这样做，则可能会遇到其他与范围相关的问题（例如，如果在指令中使用矩阵）。

柱塞