3

I'm trying to make a quick little data-grid directive with editing for a project. Here's the code sans directive.

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; }

And the codepen: http://codepen.io/mikeward/pen/gwcjt

This "almost" works except the data model never gets updated even though I'm using two-way binding (it's behaving as one-way at the moment). Is this an Angular bug or am I just not understanding something?

4

1 回答 1

4

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

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

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

于 2013-10-03T22:17:50.713 回答