rekomendasi kursus:

directiva input AngularJS

definisi dan penggunaan <input> AngularJS mengubah

perilaku baku elemen, tetapi的前提是 ng-model properti ada.

Mereka menyediakan data binding, yang berarti mereka adalah bagian dari model AngularJS dan dapat di referensikan dan di update dalam fungsi AngularJS dan DOM. Mereka menyediakan penggunaan validasi. Contoh: yang memiliki required <input> elemen, selama ia kosong, properti $valid status akan di set false.

Mereka juga menyediakan kontrol status. AngularJS menyimpan status elemen input saat ini.

bidang input memiliki status berikut:

• $untouched bidang ini belum disentuh
• $touched bidang ini telah disentuh
• $pristine Kolom ini belum diubah
• $dirty Kolom ini telah diubah
• $invalid Konten kolom salah
• $valid Konten kolom benar

nilai setiap status mewakili nilai boolean, untuk true atau false.

Contoh

kotak input dengan data binding:

<input ng-model="myInput">
<p>nilai kotak input adalah:</p>
<h1>{{myInput}}</h1>

Coba Sendiri

syntaks

<input ng-model="name">

gunakan ng-model nilai properti untuk merujuk elemen input.

kelas CSS

di dalam aplikasi AngularJS <input> elemen diberikan beberapa kelas. Kelas ini dapat digunakan untuk menata gaya elemen berdasarkan status input.

di tambahkan kelas berikut:

• ng-untouched bidang ini belum disentuh
• ng-touched bidang ini telah disentuh
• ng-pristine Kolom ini belum diubah
• ng-dirty Kolom ini telah diubah
• ng-valid Konten kolom benar
• ng-invalid Konten kolom salah
• ng-valid-key Setiap kali mengvalidasi satu kunci. Contoh:ng-valid-requiredbanyak yang harus divalidasi saat ini
• ng-invalid-key Contoh:ng-invalid-required

Jika nilai yang diwakili oleh kelas adalah falsejika kelas ini dihapus.

Contoh

Gunakan CSS standar untuk menerapkan gaya bagi elemen input yang berlaku dan yang salah:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Coba Sendiri