AngularJS 使用 ng-repeat 的可编辑网格
AngularJS editable grid using ng-repeat
我使用 ng-repeat 创建了一个可编辑的网格。
Fiddle: http://jsfiddle.net/Thw8n/86/
可以使用“保存”按钮保存编辑的数据，或者使用“取消”按钮放弃更改。但是，取消按钮需要单击 2 次才能重置行，我不明白为什么。第一次点击重置数据，第二次点击用标签替换文本框。不过，如果添加新行，“取消”按钮可以正常工作。
为什么“取消”按钮需要点击 2 次才能重置现有行？我该如何解决？
当您在设置 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 和 cancel 函数内的 if 语句将不会执行，也不会覆盖 entry元素.
我已经 updated your fiddle 以多种可能的方式之一。
我使用 ng-repeat 创建了一个可编辑的网格。
Fiddle: http://jsfiddle.net/Thw8n/86/
可以使用“保存”按钮保存编辑的数据，或者使用“取消”按钮放弃更改。但是，取消按钮需要单击 2 次才能重置行，我不明白为什么。第一次点击重置数据，第二次点击用标签替换文本框。不过，如果添加新行，“取消”按钮可以正常工作。
为什么“取消”按钮需要点击 2 次才能重置现有行？我该如何解决？
当您在设置 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 和 cancel 函数内的 if 语句将不会执行，也不会覆盖 entry元素.
我已经 updated your fiddle 以多种可能的方式之一。