如何在md-dialogangular js中持久化数据

Question

我有一个页面，上面有"高级选项"按钮。点击它，我将打开一个md对话框，其中有许多输入文本框和字段。如果我关闭这个md对话框并再次单击"高级选项"重新打开它，则数据不会持久化。我指的是文本框中的输入，并重置为默认值。

我希望在不同的调用中保持这一点。

<md-dialog-content>
<div class="md-dialog-content">
<div layout="column" layout-align="start">
<div>
<div class="md-title mainContent">Policy Title</div>
<md-switch ng-model="switchval.component" ng-change="compSwitch(switchval.component)">
</md-switch>
</div>
<div id="subContentID" layout="column" layout-align="start" class="subContent">
<div layout="row" layout-align="start start">
Policy
<md-select ng-model="compClassPolicy" ng-change="compClass(compClassPolicy)" placeholder="Existing" required md-no-asterisk="false"
style="margin: 0px;">
<md-option value="USE_EXISTING">Google</md-option>
<md-option value="USE_NEW">Amazon</md-option>
<md-option value="USE_NEW_AND_EXISTING">Motorola</md-option>
</md-select>
</div>
<div id="box">
</div>
<div id="addButtonComponent" align="center" style="display: none;">
<md-button class="md-raised md-primary" ng-click="addTextGroupComponent()">Add</md-button>
</div>
</div>
</div>
<md-divider style="margin: 20px 0;"></md-divider>
</div> </md-dialog-content>

Answer 1

您可以使用$rollbackViewValue()方法来恢复更改，但我认为这不是目的。

$rollbackViewValue()；取消更新并重置输入元素的值以阻止$modelValue的更新，这可能是由挂起的反跳事件，或者因为输入正在等待某个未来事件。

如果您有一个使用ng模型选项设置去抖动的输入事件或模糊之类的事件$viewValue与ngModel的不同步的时期$modelValue。

在这种情况下，如果尝试更新ngModel的$modelValue在这些debounced/future之前以编程方式事件已解决/发生，因为Angular的脏检查机制无法判断模型是否真的发生了变化是否。

$rollbackViewValue()方法应在以编程方式更改可能具有以下内容的输入的模型事件挂起。为了确保输入字段将更新为新的模型值和任何挂起的值操作被取消。

正常的用例是复制模型，可以选择持久化模型，如果一切正常，则刷新模型。

_this = this;
this.edit = function() {
this.modelToEdit = angular.copy(this.originalModel);
}
this.save = function () {
service.save(modelToEdit).then(function(savedModel) {
_this.originalModel = savedModel;
});
}

或者您可以备份模型并在取消时恢复

_this = this;
this.edit = function() {
this.backupModel = angular.copy(originalModel);
}
this.cancel = function() {
this.originalModel = this.backupModel;
}
this.save = function() {
service.save(this.originalModel).then(function(data) {}, function(error) {
_this.originalModel = _this.backupModel;})
}

有关更多详细信息，您可以看到。