CODEWITHSUNDEEP
angularjsangularjs-material
Alexi Felix
Alexi Felix

Reputation: 163

Angular JS material dialog with multiple options to save

I'm trying to have a dialog with multiple options to save and another option to save and close as well as cancel option, where the (save and close) button will save the data and close the dialog, while the (save) button will save the data in modal then open an empty instance of the modal, the problem is when adding two options with save I see only buttons for save and cancel, here is the angular Material Snippet example I'm modifying:

$scope.showConfirm = function(ev) {
    // Appending dialog to document.body to cover sidenav in docs app
    var confirm = $mdDialog.confirm()
          .title('Would you like to delete your debt?')
          .textContent('All of the banks have agreed to forgive you your debts.')
          .ariaLabel('Lucky day')
          .targetEvent(ev)
          .ok('Save and Close')
           .ok('Save')
          .cancel('Cancel');

When clicking on Confirm Dialog button I would like to see three buttons, below is the modified code:

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

Upvotes: 0

Views: 1760

Answers (1)

miqh
miqh

Reputation: 3664

You can't achieve the dialog presentation you've described using $mdDialog.confirm().

This method provides a preconfigured dialog that can only ever have two action buttons. You can build the dialog you want by providing more configuration parameters to $mdDialog.show().

Here's an example.

You'll need to provide the HTML for your custom dialog:

<script type="text/ng-template" id="custom-confirm.html">
  <md-dialog>
    <md-dialog-content>
      <md-content layout-padding>
        <div>...</div>
      </md-content>
    </md-dialog-content>
    <md-dialog-actions>
      <md-button ng-click="cancel()">Cancel</md-button>
      <md-button ng-click="save()">Save</md-button>
      <md-button ng-click="saveAndClose()">Save and Close</md-button>
    </md-dialog-actions>
  </md-dialog>
</script>

Then provide a custom dialog configuration to $mdDialog.show():

$scope.showCustomConfirm = function () {
  $mdDialog.show({
    controller: function ($scope, $mdDialog) {
      $scope.cancel = function () {
        $mdDialog.cancel();
      };
      $scope.save = function () {
        /* ... */
      };
      $scope.saveAndClose = function () {
        /* ...  */
      };
    },
    templateUrl: 'custom-confirm.html',
  });
};

I've forked your CodePen to include the example described above.

Edit

To have the save button reopen the same dialog, simply chain the the call to open the dialog onto a call to first hide it. You can do this because the return value of $mdDialog.hide() is a promise that resolves once the dialog has hidden itself.

To follow on from the above example, you'll need to do some some slight refactoring to make sure you're not shadowing $scope:

$scope.showCustomConfirm = showCustomConfirm;
function showCustomConfirm() {
   $mdDialog.show({
     controller: function ($scope, $mdDialog) {
       $scope.save = function () {
         // Save data...
         $mdDialog.hide().then(showCustomConfirm);
       };
       // Everything else as before...
     },
   });
}

And here's an updated CodePen fork.

Upvotes: 2

Related Questions