AngularJS ng-submit用法及代碼示例

AngularJS中的ng-submit指令用於指定要在提交事件上運行的函數。如果表單不包含操作，則可用於阻止表單提交。它由<form>元素支持。

用法:

<form ng-submit="expression"> Content ... </form>

範例1：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>ng-submit Directive</title> 
        <script src= 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> 
        </script> 
  
    </head> 
    <body ng-app="app" style="text-align:center"> 
      <h1 style="color:green">GeeksforGeeks</h1> 
      <h2>ng-submit Directive</h2> 
  
    <div ng-controller="geek"> 
            <form name="form1" ng-submit="save(this)" novalidate> 
               <label for="name">Enter Email:</label> 
               <input type="email" name="email" data-ng-model="email" required /> 
               <br> 
               <span>{{errorMsg}}</span>   
               <br> 
               <input type="submit" value="Click it!"> 
            </form> 
    </div> 
    <script> 
        var app = angular.module("app", []); 
        app.controller('geek', ['$scope', function ($scope) { 
            $scope.save = function ($this) { 
                if ($this.form1.email.$error.required) { 
                    $scope.errorMsg = "This field is required"; 
                } 
                else if ($this.form1.$invalid) { 
                    $scope.errorMsg = "Email is not valid"; 
                } 
                else { 
                    $scope.errorMsg = ""; 
                    alert("The given Email is accepted."); 
                } 
            } 
        }]); 
    </script> 
</body> 
</html>

輸出：
點擊前：
ngsubmit
點擊後：

範例2：

<!DOCTYPE html> 
    <head> 
        <title>ng-submit Directive</title> 
        <script src= 
        "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> 
        </script> 
  
    </head> 
    <body ng-app="app" style="text-align:center"> 
      <h1 style="color:green">GeeksforGeeks</h1> 
      <h2>ng-submit Directive</h2> 
    <div ng-controller="geek"> 
            <form name="form" ng-submit="login()" ng-hide="isShow"> 
            User Name:<input type="text" ng-model="users.user" required /> 
            <br /><br />             
            <button ng-disabled="form.$invalid">Click to Login</button> 
            </form> 
            <br> 
            <pre ng-show="isShow">Welcome <b>{{name}}</b>  
             You are successfully login 
             </pre> 
            <input ng-show="isShow" type="button" value="Logout" 
            ng-click="isShow=false" /> 
    </div> 
    <script> 
        var app = angular.module("app", []); 
        app.controller('geek', ['$scope', function ($scope) { 
            $scope.users = { 
                user:"" 
            }; 
            $scope.login = function () { 
                $scope.isShow = true; 
                $scope.name = $scope.users.user; 
                $scope.users = { 
                    user:"" 
                } 
            }; 
        }]); 
    </script> 
</body> 
</html>

輸出：
點擊前：
ngsubmit
點擊後：

相關用法

注：本文由純淨天空篩選整理自Vishal Chaudhary 2大神的英文原創作品 AngularJS | ng-submit Directive。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。