重置模態中的值重新加載

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> 

這是模態對話框。

在點擊打開莫代爾這個函數會被選擇框中

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。您可以簡單地使用angularjs控制器內的jquery功能。

工作的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