Angularjs 表格单元格迭代

Question

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

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

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

 <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

when the ngRepeat unrolls it copies the primitive into a local scope under item. Then ng-model binds to it. When you update the model you are updating a copy, not the original. but when you update the original it couses the repeater to realized that something changed in the items array and it then recreates the ng-model, which means ti re-copies it over to items. Hence the strange behavior but it is expected.

Short answer: never iterate and input bind to primitives in ngRepeat, as you are making a copy of value rather the reference and any updates are written to local scope rather then the original location.

我更新了现在有效的 fiddle
http://jsfiddle.net/rgaskill/Aksec/16/