AngularJS:数据绑定模式 - 保存更改只有在[储存"被点击,或者忘记了变化,如果"取消]点击 [英] AngularJS: Data-bound modal - save changes only when "Save" is clicked, or forget changes if "Cancel" is clicked

查看:97
本文介绍了AngularJS:数据绑定模式 - 保存更改只有在[储存"被点击,或者忘记了变化,如果"取消]点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个项目清单,并在点击的项目之一,将显示一个模式对话框供用户进行一些更改,然后点击关闭或保存更改。

I have a list of items, and upon clicking on one of the items, a modal dialog is displayed for the user to make some changes and click either "Close" or "Save changes".

问题是说,在用户在关闭,这些变化会反映在视图绑定到模型的一些变化和点击次数,因为数据绑定是即时的。

The problem is that say that user makes some changes and clicks on "Close", the changes would have been reflected in the model the view is bound to, since data-binding is instant.

我的问题是那么,怎么办我要么推迟更新,只能执行绑定时,保存更改点击,或以某种方式如果取消点击被忘记改变。

My question is then, how do I either defer the updates and only perform binding when "Save Changes" is clicked, or somehow forget the changes if "Cancel" is clicked.

在code为我的模态对话框是像这样:

The code for my modal dialog is like so:

<div ui-modal class="fade static" ng-model="modalShown" id="myModal" data-backdrop="static">
        <div class="modal-header">
            <button type="button" class="close" ng-click="closeModal()" aria-hidden="true">&times;</button>
            <h3>{{selectedClientFeature.feature.type}}</h3>
        </div>
        <div class="modal-body">    
            <ul class="unstyled columnlist">
                <li ng-repeat="country in countriesForEdit">
                    <input type="checkbox" ng-model="country.selected"> {{country.name}}
                </li>
            </ul>
        </div>
        <div class="modal-footer">
            <a ng-click="closeModal()" class="btn">Close</a>
            <a ng-click="saveChanges()" class="btn btn-primary">Save changes</a>
        </div>
    </div>

谢谢,
肖恩

Thanks, Shaun

推荐答案

该angularjs文档使用有只是这种情况的一个例子。你需要是克隆你的模型(见 angular.copy ),显示您的编辑模式之前,和当用户点击closeModal(),你会重新分配模型到克隆的价值。恕我直言,我会重新命名关闭按钮,取消,并把它的保存更改的权利,这是更加明确,似乎是很多站点工作。

The angularjs doc use to have an example of just this situation. What you would need is to clone your model (see angular.copy), prior to showing your edit modal, and when a user clicks on closeModal() you would reassign your model to the cloned value. IMHO, i would rename your 'Close' button to 'Cancel' and put it to the right of 'Save Changes', this is more explicit and seems to be the way many sites work.

希望这有助于

- 丹

这篇关于AngularJS:数据绑定模式 - 保存更改只有在[储存&QUOT;被点击,或者忘记了变化,如果&QUOT;取消]点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆