AngularJS:数据绑定模式 - 仅在单击"保存"时保存更改,或者如果单击"取消"则忘记更改

Question

我有一个项目列表,点击其中一个项目后,会显示一个模态对话框供用户进行一些更改,然后单击"关闭"或"保存更改".

问题在于,假设用户进行了一些更改并点击了"关闭",这些更改将反映在视图绑定的模型中,因为数据绑定是即时的.

我的问题是,我如何推迟更新并仅在单击"保存更改"时执行绑定,或者如果单击"取消"则以某种方式忘记更改.

我的模态对话框的代码如下:

<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>

谢谢,肖恩

Answer 1

angularjs doc用于举例说明这种情况.在显示编辑模式之前,您需要克隆模型(请参阅angular.copy),当用户单击closeModal()时,您将模型重新分配给克隆值.恕我直言,我会将你的"关闭"按钮重命名为"取消",并将其置于"保存更改"的右侧,这更加明确,似乎是许多网站的工作方式.

希望这可以帮助

- 担