AngularJs: How can I create a save and discard/cancel pattern in a modal form?

Question

I have a form within a modal, see plnkr here. When editing the menu item, after making some changes, If I click cancel in the modal, I want the default menuitem without any changes being made to it to show up i.e. all changes discarded(). So the next time I go into the modal I meet the default item sans changes.

If I click save I want to keep the changes i.e. run the save method.

Both save and cancle close the modals after being clicked.

How do I create such a save and discard/cancel mechanism?

Are there other angular ways of achieving this effect, different

I am using the modal from angularStrap.

Yasser Shaikh Yasser Shaikh · Accepted Answer · 2014-05-15T12:09:10

This should be helpful.

JsFiddle | Source

Html

<div ng-app>
  <div ng-controller="ClickToEditCtrl">
    <div ng-hide="editorEnabled">
      {{title}}
      <a href="#" ng-click="enableEditor()">Edit title</a>
    </div>
    <div ng-show="editorEnabled">
      <input ng-model="editableTitle" ng-show="editorEnabled">
      <a href="#" ng-click="save()">Save</a>
      or
      <a href="#" ng-click="disableEditor()">cancel</a>.
    </div>
  </div>
</div>

Angular

function ClickToEditCtrl($scope) {
  $scope.title = "Welcome to this demo!";
  $scope.editorEnabled = false;

  $scope.enableEditor = function() {
    $scope.editorEnabled = true;
    $scope.editableTitle = $scope.title;
  };

  $scope.disableEditor = function() {
    $scope.editorEnabled = false;
  };

  $scope.save = function() {
    $scope.title = $scope.editableTitle;
    $scope.disableEditor();
  };
}

AngularJs: How can I create a save and discard/cancel pattern in a modal form?

2 Answers