tutorial pengembangan web terbaru
 

AngularJS masukan Directive

❮ AngularJS Referensi

Contoh

Field input dengan data-mengikat:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Cobalah sendiri "

Definisi dan Penggunaan

AngularJS mengubah perilaku default dari <input> elemen, tetapi hanya jika ng-model atribut hadir.

Mereka menyediakan data-mengikat, yang berarti mereka adalah bagian dari model AngularJS, dan dapat disebut, dan diperbarui, baik dalam fungsi AngularJS dan di DOM.

Mereka menyediakan validasi. Contoh: sebuah <input> elemen dengan required atribut, memiliki $valid negara diatur ke false selama itu kosong.

Mereka juga menyediakan kontrol negara. AngularJS memegang keadaan saat semua elemen input.

field input memiliki status berikut:

  • $untouched Bidang belum tersentuh belum
  • $touched bidang telah tersentuh
  • $pristine Bidang belum diubah belum
  • $dirty lapangan telah dimodifikasi
  • $invalid Isi lapangan tidak valid
  • $valid Isi lapangan berlaku

Nilai dari setiap negara merupakan nilai Boolean, dan baik true atau false .

Sintaksis

<input ng-model=" name ">

Unsur masukan sedang disebut dengan menggunakan nilai ng-model atribut.

CSS Kelas

<input> elemen dalam aplikasi AngularJS diberikan kelas-kelas tertentu. Kelas-kelas ini dapat digunakan untuk gaya elemen masukan sesuai dengan negara mereka.

Kelas berikut ditambahkan:

  • ng-untouched lapangan belum tersentuh belum
  • ng-touched lapangan telah menyentuh
  • ng-pristine Bidang belum diubah belum
  • ng-dirty lapangan telah dimodifikasi
  • ng-valid Isi lapangan berlaku
  • ng-invalid Isi field tidak valid
  • ng-valid- key Salah satu kunci untuk setiap validasi. Contoh: ng-valid-required , berguna ketika ada lebih dari satu hal yang harus divalidasi
  • ng-invalid- key Contoh: ng-invalid-required

Kelas dihapus jika nilai mereka mewakili adalah false .

Contoh

Menerapkan gaya untuk elemen input yang valid dan tidak valid, menggunakan CSS standar:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Cobalah sendiri "
❮ AngularJS Referensi