我在模态中有一个表单,请参见此处的 plnkr 。编辑菜单项时,进行一些更改后,如果我在模式中单击取消,我希望显示默认菜单项而不对其进行任何更改,即所有更改都被丢弃()。所以下次我进入模式时,我会遇到默认项目没有更改。
如果我单击保存,我想保留更改,即运行保存方法。
点击后保存和取消都会关闭模态框。
如何创建这样的保存和丢弃/取消机制?
是否有其他角度方式可以实现这种效果,不同
我正在使用angularStrap的模态。
我在模态中有一个表单,请参见此处的 plnkr 。编辑菜单项时,进行一些更改后,如果我在模式中单击取消,我希望显示默认菜单项而不对其进行任何更改,即所有更改都被丢弃()。所以下次我进入模式时,我会遇到默认项目没有更改。
如果我单击保存,我想保留更改,即运行保存方法。
点击后保存和取消都会关闭模态框。
如何创建这样的保存和丢弃/取消机制?
是否有其他角度方式可以实现这种效果,不同
我正在使用angularStrap的模态。
这应该会有所帮助。
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();
};
}
编辑示例:http ://plnkr.co/edit/OTN4Qh?p=preview
改变了什么:
添加ng-init='orginalName = menuItem.Name'
到编辑菜单
ng-click
将取消按钮更改为ng-click="menuItem.Name = orginalName; dismiss()"
通过这些更改,他们将在键入时看到更新,但是当更改被取消时,它们将被还原。
如果需要,您可以将其反转,这样编辑在键入时不会更新,只会在保存时应用。