21

我有一个项目列表，单击其中一个项目时，会显示一个模式对话框，供用户进行一些更改，然后单击“关闭”或“保存更改”。

问题是说用户进行了一些更改并单击“关闭”，这些更改将反映在视图绑定到的模型中，因为数据绑定是即时的。

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

我的模态对话框的代码是这样的：

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

谢谢，肖恩

4

2 回答 2

12

angularjs 文档曾经有一个关于这种情况的例子。您需要在显示您的编辑模式之前克隆您的模型（请参阅angular.copy），当用户单击 closeModal() 时，您会将模型重新分配给克隆值。恕我直言，我会将您的“关闭”按钮重命名为“取消”并将其放在“保存更改”的右侧，这更明确，似乎是许多网站的工作方式。

希望这可以帮助

- 担

于 2012-10-09T05:39:03.307 回答
1

为了自动化手动克隆/更新模型，我提出了lazy-model指令。
见https://stackoverflow.com/a/20643001/740245

于 2013-12-17T19:34:02.090 回答