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.

Answer 1

Edited example: http://plnkr.co/edit/OTN4Qh?p=preview

What was changed:

Added ng-init='orginalName = menuItem.Name' to the edit menu

Changed ng-click on the cancel button to ng-click="menuItem.Name = orginalName; dismiss()"

With these changes, they will see the updates as they type, but when the changes are canceled they will be reverted.

If wanted, you can reverse this so that the edits are not updated as they type and would only be applied on save.

Answer 2

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();
  };
}