angularjs - 带编辑功能的 Angular 表

Question

我正在尝试通过编辑项目来制作一个快速的小数据网格指令。这是没有指令的代码。

HTML

<div>&nbsp;</div>
<div ng-app="app">
  <div ng-controller="ctrl">
    <table class=pure-table pure-table-striped>
      <tr ng-repeat="row in data">
        <td ng-repeat="col in row"><input ng-model="col"></td>
      </tr>
    </table>
    <p>{{data}}</p>
  </div>
</div>

JS

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

app.controller('ctrl', function ($scope) {  
  $scope.data = [
    [100, 200, 300],
    [400, 500, 600]
  ];
});

CSS

td input { border: none; text-align: right; width: 5em; }

代码笔:http://codepen.io/mikeward/pen/gwcjt

这种“几乎”有效，除了数据模型永远不会更新，即使我使用的是双向绑定(bind)(目前它表现为单向)。这是一个 Angular 错误还是我只是不明白什么？

Answer 1

写 ng-model="row[$index]" 而不是 ng-model="col"。

我不确定原因，但这似乎与表单和输入的问题类似。我相信输入会创建一个子范围。 col 只是一个标量变量，因此当范围被复制时，副本中的 col 最终成为一个完全独立的变量。因此，对 col 副本的更改不会更改原始文件。另一方面，row 是一个非标量变量，它被“引用”“复制”，因此对输入中 row 的任何更改也会更改原始 行。

AngularJS 的人强调在 ng-model 中使用标量变量是错误的。他们建议在 ng-model 中应该有一个点。 row[$index] 不包含点，但基本上只是 row.$index，首先插入 $index。