Сброс значения на модального поля на перезагрузках

Question

Сброс значения на модальной коробке на перезагрузке

<div class="modal fade" id="detailsModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <!-- Modal Header --> 
     <div class="modal-header custom-modal-header"> 
      <button type="button" class="close" data-dismiss="modal"> 
      <span aria-hidden="true">&times;</span> 
      <span class="sr-only">Close</span> 
      </button> 
      <h4 class="modal-title" id="myModalLabel"> 
       Create Job Vaccination 
      </h4> 
     </div> 
     <!-- Modal Body --> 
     <form name="vaccjobctrl.vaccineForm" class="form-inline" > 
      <div class="modal-body" style="height: 150px"> 
       <div class="row "> 
        <div class="form-group col-md-12" ng-class="{ 'has-error' : vaccjobctrl.vaccineForm.screeningType.$invalid && (vaccjobctrl.vaccineForm.screeningType.$dirty || vaccjobctrl.vaccineForm.screeningType.$touched) }"> 
        <label for="regId" class="col-md-6">Screening Type:</label> 
        <span class="col-md-6"> 
         <select style="width: 100%;" 
          ng-model="vaccjobctrl.vaccineForm.screeningTypeMast.screeningTypeId" 
          ng-options="sctype.screeningTypeId as sctype.screeningType for sctype in vaccjobctrl.screeningTypeList" 
          class="form-control field-size ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" name="screeningType" 
          id="screeningType" required> 
          <option value="">--SELECT--</option> 
          <option value="{{sctype.screeningTypeId}}">{{sctype.screeningType}}</option> 
         </select> 
        </span> 
        <div class="col-sm-6 error-color" 
         ng-if="vaccjobctrl.interacted(vaccjobctrl.vaccineForm.screeningType)" 
         ng-messages="vaccjobctrl.vaccineForm.screeningType.$error"> 
         <div ng-messages-include="src/common/validation-messages.html"></div> 
        </div> 
        </div> 
       </div> 

      <!-- Modal Footer --> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal"> 
       Cancel 
       </button> 
       <button type="button" class="btn btn-primary-joli" ng-click="vaccjobctrl.saveJobVaccination(vaccjobctrl.vacc);" ng-disabled="vaccjobctrl.vaccineForm.$invalid" data-dismiss="modal"> 
       Create Vaccination 
       </button> 
      </div> 
     </form> 
     </div> 
    </div> 
</div> 

это модальное окно.

По щелчку на открытых Modal эта функция будет называться

vm.showModal = function() { 
     $('#detailsModal').modal('show'); 
}; 

значения в поле выбора предварительно заполняется, на повторном открытии окна модальный это показать ранее выбранные значения. Если вы попытаетесь очистить, чтобы цвет рамки выбора был изменен на красный при повторном открытии.

Answer 1

В Bootstrap 3 вы можете сбросить свою форму после модального окна были закрыты следующим образом:

$('.modal').on('hidden.bs.modal', function(){ 
    $(this).find('form')[0].reset(); 
}); 

Вы можете просто сбросить любое содержимое вручную, когда модальный скрыт.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch modal 
</button> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 
     </button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <div class='modal-body1'> 
      <h3>Close and open, I will be gone!</h3> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

Вы можете использовать:

$(".modal").on("hidden.bs.modal", function(){ 
    $(".modal-body1").html(""); 
}); 

Вы можете сделать больше, как:

$(document).ready(function() { 
    $(".modal").on("hidden.bs.modal", function() { 
    $(".modal-body1").html("Where did he go?!?!?!"); 
    }); 
}); 

Есть больше о них в http://getbootstrap.com/javascript/#modals-usage.

UPDATE согласно вашей потребности:

Если вы хотите сделать это angular путь, используйте Jquery SRC выше angularjs источник в index.html. Вы можете просто использовать функции jquery внутри контроллера angularjs.

Рабочая JsFiddle: http://jsfiddle.net/tnq86/15/

Для использования функции document.ready в угловой.

angular.module('MyApp', []) 

.controller('MyCtrl', [function() { 
    angular.element(document).ready(function() { 
     document.getElementById('msg').innerHTML = 'Hello'; 
    }); 
}]); 

Однако Создание директивы правильный способ сделать это. Перейдите по ссылке, чтобы получить некоторую помощь при создании директивы для выполнения функций jquery в angularjs.

jquery in angularjs using directive