Penjelasan terperinci tentang penggunaan borang AngularJS

Penjelasan terperinci tentang penggunaan borang AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:39

asal

939 orang telah melayarinya

AngularJS menyediakan pengisian dan pengesahan borang yang kaya. Kita boleh menggunakan ng-click untuk mengendalikan acara butang klik AngularJS, dan kemudian menggunakan bendera $dirty dan $invalid untuk pengesahan. Gunakan pengisytiharan borang novalidate untuk melumpuhkan sebarang pengesahan khusus penyemak imbas. Kawalan bentuk menggunakan banyak aktiviti sudut. Mari kita lihat acara yang berkaitan dahulu.
Acara

AngularJS menyediakan berbilang acara yang boleh dikaitkan dengan kawalan HTML. Contohnya ng-click biasanya dikaitkan dengan butang. Berikut ialah peristiwa yang disokong oleh AngularJS.

ng-klik
ng-dbl-klik
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-tekan kekunci
ng-ubah

ng-klik

Borang menetapkan semula data menggunakan perintah mengklik butang.

<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@yiibai.com";
 }  
  $scope.reset();
}
</script>

Salin selepas log masuk

Data pengesahan

Anda boleh menggunakan ralat penjejakan di bawah.

$dirty - Nilai yang dinyatakan telah ditukar.
$invalid- Status nilai ini tidak sah.
$error- menunjukkan ralat yang tepat.

Contoh

Contoh berikut akan menunjukkan semua arahan di atas.
testAngularJS.html

<html>
<head>
<title>Angular JS Forms</title>
<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 Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</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">First Name is required.</span>
  </span>
</td></tr>
<tr><td>Enter last name: </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">Last Name is 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">Email is required.</span>
  <span ng-show="studentForm.email.$error.email">Invalid email address.</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>
function studentController($scope) { 
  $scope.reset = function(){
 $scope.firstName = "Mahesh";
 $scope.lastName = "Parashar";
 $scope.email = "MaheshParashar@yiibai.com";
  }  
  $scope.reset();
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Salin selepas log masuk

Output

Buka textAngularJS.html dalam penyemak imbas web anda. Lihat hasilnya di bawah.

2015617100230750.png (715×347)