如何在md-dialog angular js中保存数据

时间:2017-01-13 08:09:19

标签: javascript angularjs-material

我有一个页面,“高级选项”作为按钮。点击我正在打开一个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>

1 个答案:

答案 0 :(得分:0)

您可以使用$ rollbackViewValue()方法还原更改,但我认为这不是意图。

  

$ rollbackViewValue();取消更新并重置输入元素   阻止更新$ modelValue的值,这可能是由于   未决的去抖事件或因为输入正在等待一些事件   未来的事件。

     

如果您的输入使用ng-model-options设置去抖动   事件或事件,如模糊,你可以有一个情况   $ viewValue与ngModel不同步的时段   $ modelValue。

     

在这种情况下,如果您尝试更新,则可能会遇到困难   ngModel的$ modelValue在这些去抖/未来之前以编程方式进行   事件已经解决/发生,因为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;})

}

有关详细信息,请参阅this