Question

我使用角度ui-grid和angular-modal-service + bootstrap。

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

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

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

感谢数据绑定...

当数据绑定应该开始/结束或如何拦截它时，angularJS中是否有任何功能可以让我更有控制权？

Answer 1

一种常见的方法（在Angular 1.3之前）是在将对象传递给对话框之前制作对象的副本。当用户保存编辑时，您将使用编辑后的副本替换原始文件。

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

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

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

<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();
}

链接到example plunker。

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

当取消绑定到datagrid单元格的对话框时，如何还原绑定数据

1 个答案: