Сброс модальный, который динамически создан

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 (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);