Angularjs表格单元格迭代

发布时间：2020-12-17 10:25:51 所属栏目：安全来源：网络整理

导读：我有一种感觉,我做错了什么,但这种行为似乎很奇怪.我根据控制器中的数据动态创建一个表.当我输入一个字符表中的一个单元格时,它会立即将焦点更改为下一个单元格并在那里添加字符. 我有一个非常简单的例子,它在jsfiddle中重现了这个问题. http://jsfiddle.net

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

我有一个非常简单的例子,它在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': ''
    }
   };
 }?

是什么导致了这种奇怪的行为？

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

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.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!