Question

我正在使用具有3个输入字段的实现模态。我一直将modal设置为true，以便可以通过单击外部关闭modal。通过单击关闭按钮关闭模态时，我正在调用一个函数来清除输入字段，但是当通过单击外部关闭模态时，我无法这样做。

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

<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（），以上代码给出了错误。

Answer 1

模态关闭时，您可以触发功能，请参见http://materializecss.com/modals.html#options

对于1.0.0版

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.5.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.poc.springbatch.poc</groupId>
    <artifactId>SpringBatch</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>SpringBatch</name>
    <description>Spring Batch</description>

    <properties>
        <java.version>1.8</java.version>
        <maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-batch</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.microsoft.sqlserver</groupId>
            <artifactId>mssql-jdbc</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.batch</groupId>
            <artifactId>spring-batch-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.batch</groupId>
            <artifactId>spring-batch-infrastructure</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

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

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

关闭实现模型时如何清除输入字段？

1 个答案: