使用ng-repeat的AngularJS可编辑网格

Question

我使用ng-repeat创建了一个可编辑的网格。

小提琴：http://jsfiddle.net/Thw8n/86/

可以使用“保存”按钮保存编辑的数据，或使用“取消”按钮丢弃更改。但是，取消按钮需要2次单击才能重置行，我无法弄清楚原因。第一次单击重置数据，第二次使用标签替换文本框。如果添加了新行，则“取消”按钮可以正常工作。

为什么“取消”按钮需要2次点击才能重置现有行？我该如何解决这个问题？

Answer 1

当您点击某行时编辑时，您需要设置entry.editMode = true，将已编辑字段的索引存储在$scope.editing内，并将当前记录复制到$scope.newField。

请注意，此时 $scope.newField === true 和 $scope.editing !== false 。

然后当您第一次点击取消时，在entry.editMode = false语句中设置cancel然后在if内部设置 $scope.appkeys[$scope.editing] = $scope.newField 会覆盖作为ng-repeat来源的数组中的元素。此时编辑的条目editMode === true如上所述。但是$scope.editing === false。

第二次点击取消再次设置entry.editMode = false，但这次$scope.editing === false和if语句中的cancel语句将不会执行，也不会覆盖entry } element。

我以多种可能的方式之一updated your fiddle。