亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

AngularJS 表單

AngularJS豐富了表單填寫和驗證。我們可以使用ngclick事件來處理click按鈕，并使用$dirty和$invalid標(biāo)志無縫地進(jìn)行驗證。使用帶有表單聲明的novalidate可禁用任何特定于瀏覽器的驗證。表單控件大量使用AngularJS事件。讓我們先看看這些事件。

事件

AngularJS提供了與HTML控件關(guān)聯(lián)的多個事件。例如，ng-click指令通常與按鈕關(guān)聯(lián)。AngularJS支持以下事件-

  • ng-click

  • ng-dbl-click

  • ng-mousedown

  • ng-mouseup

  • ng-mouseenter

  • ng-mouseleave

  • ng-mousemove

  • ng-mouseover

  • ng-keydown

  • ng-keyup

  • ng-keypress

  • ng-change

ng-click

使用按鈕的ng-click指令重置表單數(shù)據(jù)。

<input name = "firstname" type = "text" ng-model = "firstName" required>
<input name = "lastname" type = "text" ng-model = "lastName" required>
<input name = "email" type = "email" ng-model = "email" required>
<button ng-click = "reset()">Reset</button>

<script>
   function studentController($scope) { 
      $scope.reset = function() {
         $scope.firstName = "Mahesh";
         $scope.lastName = "Parashar";
         $scope.email = "MaheshParashar@(cainiaoplus.com)";
      }   
      
      $scope.reset();
   }
</script>

驗證數(shù)據(jù)

以下內(nèi)容可用于跟蹤錯誤。

  • $dirty ?說明值已更改。

  • $invalid ?指出輸入的值無效。

  • $error ?說明確切的錯誤。

在線示例

以下示例將展示所有上述指令。

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
      <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   <body>
      
      <h2>AngularJS-表單示例</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <form name = "studentForm" novalidate>
            <table border = "0">
               <tr>
                  <td>輸入名字:</td>
                  <td><input name = "firstname" type = "text" ng-model = "firstName" required>
                     <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
                        <span ng-show = "studentForm.firstname.$error.required">必須填寫名字.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>輸入姓氏: </td>
                  <td><input name = "lastname"  type = "text" ng-model = "lastName" required>
                     <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
                        <span ng-show = "studentForm.lastname.$error.required">必須填寫姓氏.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
                     <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
                        <span ng-show = "studentForm.email.$error.required">電子郵件為必填項.</span>
                        <span ng-show = "studentForm.email.$error.email">無效的郵件地址.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>
                     <button ng-click = "reset()">Reset</button>
                  </td>
                  <td>
                     <button ng-disabled = "studentForm.firstname.$dirty &&
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
                        studentForm.lastname.$invalid || studentForm.email.$dirty &&
                        studentForm.email.$invalid" ng-click="submit()">Submit</button>
                  </td>
               </tr>
					
            </table>
         </form>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.reset = function() {
               $scope.firstName = "Sea";
               $scope.lastName = "Gull";
               $scope.email = "Seagull@(cainiaoplus.com)";
            }
            
            $scope.reset();
         });
      </script>
      
   </body>
</html>
測試看看?/?

輸出結(jié)果

圖片.png

在網(wǎng)絡(luò)瀏覽器中打開文件testAngularJS.htm并查看結(jié)果。