javascript - 嵌套的 ng-repeat 不更新对象

Question

我需要为用户预设 NxN 矩阵输入。因此，我在表对象上使用嵌套的 ng-repeat 来创建输入。尽管它最初填充成功，但它不会更新对象。

HTML

<div ng-app="myApp" ng-controller="VibrationCtrl">
  <table>
    <tr ng-repeat="Row in Mi">
      <td ng-repeat="I in Row track by $index">
        <input type="text" ng-model="I">
      </td>
    </tr>
  </table>

  {{Mi}}
</div>

JS

var myApp = angular.module('myApp', []);

function VibrationCtrl($scope) {
  $scope.Mi = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ];
}

myApp.controller('VibrationCtrl', VibrationCtrl);

JsFiddle:

https://jsfiddle.net/wLhucx8b/2/

Answer 1

ng-model需要引用对象(数组)的实际部分，而不仅仅是值。

ng-model="Row[$index]"

https://jsfiddle.net/wLhucx8b/4/

否则它不会更新实际对象的引用。想象一下，您正在遍历一个数组，您只是修改值，而不是数组中的引用:

collection.forEach(function (value, index) {
  value = '123'; // this won't actually change the original array
  collection[index] = '123' // this WILL
});

^ ng-repeat用ng-model其中一个值的行为方式相同。

注意:使用 <input type="number" ... />否则你的 ng-model值将变成字符串!