Question

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

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

和codepen：http://codepen.io/mikeward/pen/gwcjt

这种“差不多”的工作原理除了数据模型永远不会更新，即使我正在使用双向绑定（它目前表现为单向）。这是一个Angular bug还是我只是不理解某些东西？

Answer 1

写ng-model="row[$index]"代替ng-model="col"。

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

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

带编辑的角度表

1 个答案: