当绑定到数据网格单元格的对话框被取消时如何恢复绑定数据

Question

我正在使用 angular 和 angular ui-grid 和 angular-modal-service + bootstrap.

我的 ui-grid 中的数据也绑定到我的对话框，当用户双击进入数据网格的单元格时打开该对话框。

当用户在对话框中更改数据时，数据网格中的数据也会更改。

当用户决定取消对话框时，编辑的数据保留在单元格中

感谢数据绑定...

angularJS 中是否有任何功能可以让我更好地控制数据绑定应该start/end 或如何拦截它？

Answer 1

一种常见的方法（在 Angular 1.3 之前）是在将对象传递给对话框之前复制该对象。当用户保存编辑时，您替换原来的 w/the 编辑副本。

在 Angular 1.3 中，他们添加了 ng-model-options，这使您可以更好地控制何时更新模型值。当您使用 ng-model 时，它会将数据存储在两个名为 viewValue 和 modelValue.

的属性中

viewValue 是当前输入到 input/text 区域的内容。 modelValue 是绑定使用的实际值，如果用户输入无效，它可能不匹配 viewValue。

使用 ng-model-options 您可以推迟更新模型值，直到发生某些事件。在这种情况下，您可以使用表单调度的 "submit" 事件来延迟更新模型：

<form name="myForm" ng-model-options="{updateOn: 'submit'}" ng-submit="onFormSubmit()">
  <input type="text" name="myInput" ng-model="dialogData.value" />
  <button type="submit">Save</button>
  <button type="button" ng-click="cancelDialog()">Cancel</button>
</form>

$scope.onFormSubmit = function() {
  // do something then close dialog
  $scope.$close();
};

$scope.cancelDialog = function() {
  // cancel any pending updates to modelValue
  // not required in this example, but good practice
  $scope.myForm.$rollbackViewValue();
  $scope.$close();
}

Link 到 example plunker.

这在您丢弃表单的情况下效果很好（例如模态对话框中的表单）。但是我在验证方面遇到了一些麻烦，我认为这只是一个 Angular 错误，b/c documentation for $rollbackViewValue 提到使用它来重置表单。

当绑定到数据网格单元格的对话框被取消时如何恢复绑定数据

When a dialog that is bound to a datagrid cell is cancelled how to revert the bound data

angularjs

angular-ui-grid