动态创建的重置模式

Question

我第一次使用 Angular JS 进行开发，我创建了以下引导模式，其中有 3 个动态创建的 div。每次创建一个 div，它们是互斥的。代码如下：

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4>User Menu</h4>
        </div>
        <div class="row">
            <!-- USER MENU 1 -->
            <div ng-if="ctrl.state.current.name==='userMenu1'" ng-class="ctrl.fileOpen ? 'col-xs-8' : 'col-xs-12'" class="tablecontainer">
            <table class="table table-striped table-hover table-condensed">
                <colgroup>
                    <col class="col-md-1">
                    <col class="col-md-2">
                    <col class="col-md-2">
                    <col class="col-md-3">
                    <col class="col-md-2">
                    <col class="col-md-2">
                </colgroup>
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Address</th>
                        <th>Attachment</th>
                        <th>Group</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="user in users">
                        <td>
                            <input type="checkbox" value="" ng-model="ctrl.checked[$index]" ng-disabled="ctrl.fileupload!==undefined" ng-change="ctrl.checkBox($index)" />
                            </td>
                            <td>{{user.firstname}}</td>
                            <td>
                                <select class="form-control" ng-model="user.selectedAddress" ng-change="ctrl.checked[$index] = user.selectedAddress.destAddress" ng-options="o as o.destName for o in user.addresses"></select>
                            </td>
                        <td>{{user.selectedAddress.destAddress}}</td>
                        <td>{{ctrl.getFile($index)}}</td>
                        <td>{{ctrl.getGroup($index)}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- USER MENU 2 DIV -->
        [...]

        <!-- USER MENU 3 DIV -->
        [...]

        <!-- BUTTONS PANEL DIV --->
        [...]

            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Close</button>
            </div>
    </div>
</div>

在每个 div 中，用户可以在某些输入中填充文本，甚至可以通过按下某些按钮来添加新的输入字段（我在代码中省略了它们）。 我希望每次用户关闭模态并再次打开它时，模态都会恢复到初始 div（menu1、menu2 或 menu3，取决于用户打开模态的位置）。

我该怎么做？

我尝试了几种方法（例如 this 或 this），但没有一种方法适合我的情况。

Answer 1

我更改了您的代码。你可以看到我的代码。

http://jsfiddle.net/deadmask92/8XCps/344/

我补充说：

function reset(){
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
}

$('body').on('click','#myClose',reset);

$('body').on('click','#CloseIcone',reset);

我改变了：

$('body').on('click','#myReset',reset);