具有不同保存选项的Angular MaterialJS对话框表单 [英] Angular MaterialJS Dialog form with different save options

问题描述

我正在尝试将表单数据保存在mdDialog中，但具有(保存和关闭)对话框的选项，以及(保存)将保存表单数据的选项，然后打开另一个对话框为空的对话框，而不必再次关闭并打开mdDialog，问题是如何为两个保存操作以相同的形式调用相同的SaveData函数?

$scope.saveData = function (isValid) {
        if (isValid) {
          updateservice.postdata($scope.myformdata)
            .then(function (data) {
              $mdDialog.hide();
            });
      // error handling
        } 
      };

并在模板中:

<md-dialog>
  <form name="form" ng-submit="saveData(form.$validform)" novalidate>
    <md-dialog-content>
      <div class="md-dialog-content">
        <div>
        </div>
        <table class="table display" border="1" span="1" name="newForm" novalidate role="form" ng-style="{ width: th.width }">
           </tr>
          <tr>
            <td><input type="text" class="form-control text-center" placeholder="required"  ng-required="true"></td>
            <td><input type="text" class="form-control text-center" placeholder="optional" ng-required="true"></td>
          </tr>
        </table>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <md-progress-circular md-mode="indeterminate" md-diameter="20px" class="spinner"></md-progress-circular>
      <button type="button" class="btn btn-primary" ng-click="save()" >Save</button> 
      <button type="submit" class="btn btn-primar">Save and close</button> 
      <button type="button" class="btn btn-default" ng-click="cancel()" ng-disabled="loading">Cancel</button>
      </md-dialog-actions>
  </form>
</md-dialog>

我将保存"按钮更改为类型"按钮，是不发布表单数据，而是将类型更改为提交"，例如保存并关闭保存数据，然后打开并关闭对话框.

这是带有我的代码的codePen:

https://codepen.io/anon/pen/ZqoYRx

解决方案

如何在保存函数中传递像isSaveAndClose这样的参数:

在HTML中:

<button type="button" class="btn btn-primary" ng-click="save(false)" ng-show="!loading">Save</button> 
<button type="button" class="btn btn-primar" ng-click="save(true)">Save and close</button>

在JS中:

$scope.save = function (isSaveAndClose) {
      saveData();
      if (isSaveAndClose)
        $mdDialog.hide().then(showCustomConfirm);
    };

I'm trying to save form data in mdDialog but with options of (save and close) the dialog and (save) which will save the form data then open another dialog empty dialog without having to close and open the mdDialog again, the problem is how to call same SaveData function in same form for both save operations?

$scope.saveData = function (isValid) {
        if (isValid) {
          updateservice.postdata($scope.myformdata)
            .then(function (data) {
              $mdDialog.hide();
            });
      // error handling
        } 
      };

and in the template:

<md-dialog>
  <form name="form" ng-submit="saveData(form.$validform)" novalidate>
    <md-dialog-content>
      <div class="md-dialog-content">
        <div>
        </div>
        <table class="table display" border="1" span="1" name="newForm" novalidate role="form" ng-style="{ width: th.width }">
           </tr>
          <tr>
            <td><input type="text" class="form-control text-center" placeholder="required"  ng-required="true"></td>
            <td><input type="text" class="form-control text-center" placeholder="optional" ng-required="true"></td>
          </tr>
        </table>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <md-progress-circular md-mode="indeterminate" md-diameter="20px" class="spinner"></md-progress-circular>
      <button type="button" class="btn btn-primary" ng-click="save()" >Save</button> 
      <button type="submit" class="btn btn-primar">Save and close</button> 
      <button type="button" class="btn btn-default" ng-click="cancel()" ng-disabled="loading">Cancel</button>
      </md-dialog-actions>
  </form>
</md-dialog>

I changed Save button with type button is not posting the formdata, and changing type to submit like save and close saves data then opens and closes the dialog.

here's codePen with my code:

https://codepen.io/anon/pen/ZqoYRx

解决方案

How about passing an argument like isSaveAndClose in the save function:

In HTML:

<button type="button" class="btn btn-primary" ng-click="save(false)" ng-show="!loading">Save</button> 
<button type="button" class="btn btn-primar" ng-click="save(true)">Save and close</button>

In JS:

$scope.save = function (isSaveAndClose) {
      saveData();
      if (isSaveAndClose)
        $mdDialog.hide().then(showCustomConfirm);
    };

这篇关于具有不同保存选项的Angular MaterialJS对话框表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！