Question

我有一种感觉我做错了什么，但这种行为似乎很奇怪。我根据控制器中的数据动态创建一个表。当我在表格中输入一个单元格时，它立即将焦点更改为下一个单元格，并在那里添加字符。

我有一个非常简单的例子，它在jsfiddle中重现了这个问题。

 <div ng-app="miniapp">
<div ng-controller="Matrix">
    <h1>Enter a value in the fist cell.</h1>
   <table>
<thead>
    <tr>
        <th>Row Name</th>
        <th>0</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="(row, values) in valueMap">
        <td>{{row}}</td>
        <td ng-repeat="(col, val) in values" ><input type="text" ng-model="valueMap[row][col]"></input></td>
    </tr>

</tbody>
</table>                      
</div>    
 </div>

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

 function Matrix($scope) {
$scope.valueMap = {
    aRow: {
        '0': '',
        '1': '',
        '2': '',
        '3': '',
        '4': '',
        '5': ''
    }
   };
 }

造成这种奇怪行为的原因是什么？

Answer 1

好的，我发现了这个问题。这篇文章增加了一些清晰度。

https://groups.google.com/forum/#!topic/angular/VD77QR1J6uQ/discussion

当ngRepeat展开时，它将原语复制到item下的本地范围内。然后ng-model绑定它。更新模型时，您要更新副本，而不是原始副本。但是当你更新原始版本时，它会让转发器意识到items数组中的某些内容发生了变化，然后重新创建了ng-model，这意味着我会将其重新复制到项目中。因此奇怪的行为，但它是预期的。

简答：永远不要在ngRepeat中迭代并输入绑定到基元，因为您正在复制值而不是引用，任何更新都写入本地范围而不是原始位置。

我更新了现在有效的小提琴

http://jsfiddle.net/rgaskill/Aksec/16/

Angularjs表格单元格迭代

1 个答案: