【问题标题】:How to clear input fields when materialize modal is closed? [duplicate]物化模式关闭时如何清除输入字段? [复制]
【发布时间】:2019-08-16 06:40:06
【问题描述】:

我正在使用具有 3 个输入字段的物化模式。我一直保持模态可关闭状态,以便可以通过单击外部来关闭模态。当通过单击关闭按钮关闭模态时,我正在调用一个函数来清除输入字段但是当通过单击外部关闭模态时我无法这样做。

我已经尝试过使用模态关闭回调选项。

<div id="resetpassword" class="modal modal-fixed-footer modal-index" ng-controller="ChangePassword">
     <form>
     <div class="modal-header">
          <span>Change Password</span>
          <a class="btn-flat modal-action modal-close">
          <i class="material-icons" ng-click="reset()">clear</i></a>
      </div>
      <div class="modal-content">
           <div class="row">
                <div class="col s8 offset-s2">
                     <div class="col s12">
                          <div class="input-field col s12 clear">
                               <input name="old_password" ng-model="passForm.current_password" id="old_password" type="password">
                                <label class="left-align" for="old_password">Current Password</label>
                          </div>
                          <div class="input-field col s12 clear">
                                <input name="new_password1" ng-model="passForm.password1" id="new_password" type="password">
                                <label class="left-align" for="new_password">New Password</label>
                          </div>
                          <div class="input-field col s12 clear">
                                 <input name="new_password2" ng-model="passForm.password2" id="cnf_new_password" type="password">
                                 <label class="left-align" for="cnf_new_password">Confirm New Password</label>
                          </div>
                       </div>
                  </div>
             </div>
        </div>
        <div class="modal-footer">
             <button class="btn" type="submit" ng-click="requestChangePassword()">Change Password</button>
        </div>
        </form>
 </div>

 <script type="text/javascript">
      $(document).ready(function() {
           $('.modal').modal({complete: function(modal, trigger) {
                reset();
           }});
       });
  </script>

控制器

$scope.reset = function() {
      $scope.passForm.current_password = null;
      $scope.passForm.password1 = null;
      $scope.passForm.password2 = null;
}

上面的代码给出了错误,因为 reset() 没有定义。

【问题讨论】:

    标签: javascript jquery html angularjs materialize


    【解决方案1】:

    当一个modal关闭时可以触发一个函数,见http://materializecss.com/modals.html#options

    对于版本 1.0.0

    $("#id-of-your-modal").onCloseEnd({
        reset();
    }
    

    对于版本 0.100.2(来自http://archives.materializecss.com/0.100.2/modals.html

    $("#id-of-your-modal").modal({
        complete: function(){
            reset();
        }
    });
    

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-17
    • 1970-01-01
    • 2018-11-11
    • 2016-10-21
    • 2015-07-03
    相关资源
    最近更新 更多