Question

我在模态中有一个表单，请参阅plnkr here。在编辑菜单项时，在进行一些更改后，如果我在模态中单击取消，我想要默认的menuitem而不进行任何更改以显示，即所有更改被丢弃（）。所以下次我进入模态我遇到默认项目没有变化。

如果我点击保存，我想保留更改，即运行保存方法。

点击后，save和cancle都会关闭模态。

如何创建这样的保存和丢弃/取消机制？

是否有其他角度方式来实现这种效果，不同

我正在使用angularStrap中的模态。

Answer 1

这应该会有所帮助。

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>

角

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

Answer 2

编辑示例：http://plnkr.co/edit/OTN4Qh?p=preview

改变了什么：

将ng-init='orginalName = menuItem.Name'添加到编辑菜单

将取消按钮上的ng-click更改为ng-click="menuItem.Name = orginalName; dismiss()"

通过这些更改，他们会在输入时看到更新，但是当更改被取消时，它们将被还原。

如果需要，您可以撤消此操作，以便编辑在键入时不会更新，并且只会在保存时应用。

AngularJs：如何以模态形式创建保存和放弃/取消模式？

2 个答案: