具有不同保存选项的Angular MaterialJS对话框表单

时间:2018-10-18 20:55:52

标签: angularjs forms angularjs-material mddialog

我正在尝试将表单数据保存在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

1 个答案:

答案 0 :(得分:0)

如何在保存函数中传递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);
    };