Petunjuk Model AngularJS
Petunjuk NG-Model digunakan untuk mengikat data aplikasi dengan nilai pengontrol HTML (input, pilih, TextArea).
Perintah NG-Model
Arahan NG-Model mengikat nilai bidang input ke variabel yang dibuat oleh AngularJS.
Instance AngularJS
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div ng-app="myApp" ng-controller="myCtrl">Name: <input ng-model = "name"> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.name = "John doe";}); </skrip> <p> menggunakan NG-Model. </p> </body> </html>Hasil Menjalankan:
nama:Gunakan Arahan Model NG untuk mengikat nilai bidang input ke properti pengontrol.
Ikatan dua arah
Ikatan dua arah, saat memodifikasi nilai bidang input, nilai properti AngularJS juga akan dimodifikasi:
Instance AngularJS
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div ng-app="myApp" ng-controller="myCtrl">Name: <input ng-model = "name"> <h1> Anda memasukkan: {{name}} </h1> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.name = "John doe"; Nama judul juga akan dimodifikasi sesuai. </p> </body> </html>Hasil Menjalankan:
nama:
Anda masuk: John doe
Ubah nilai kotak input, dan nama judul juga akan dimodifikasi sesuai.
Verifikasi input pengguna
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" "> </skrip> </head> <body> <Formulir =" "" "" "" " name = "myAddress" ng-model = "text"> <span ng-show = "myForm.myaddress. $ error.email"> bukan alamat email hukum </span> </form> <p> Masukkan alamat email Anda di kotak input. Jika ini bukan alamat email hukum, pesan cepat akan muncul. </p> </body> </html>
Hasil Menjalankan:
E-mail:
Masukkan alamat email Anda di kotak input. Jika ini bukan alamat email hukum, pesan cepat akan muncul.
Kelas CSS
Arahan Model NG menyediakan kelas CSS untuk elemen HTML berdasarkan keadaan mereka:
Instance AngularJS
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style>input.ng-invalid { background-color: LightBlue;} </tyle> </head> <body> <form ng-app = "" name = "myForm"> Masukkan nama Anda: <input name = "myname" ng-model = "mytext" diperlukan> </form> <p> Edit bidang teks, dan warna latar belakang dari negara bagian yang berbeda akan dikirim untuk berubah. </p> <p> Atribut yang diperlukan ditambahkan ke bidang teks, yang diperlukan, dan ilegal jika kosong. </p> </body> </html>Hasil Menjalankan:
Edit bidang teks, warna latar belakang dari berbagai negara akan dikirim untuk berubah.
Bidang teks telah menambahkan properti yang diperlukan, yang diperlukan, dan ilegal jika kosong.
Petunjuk NG-Model menambah/menghapus kelas-kelas berikut sesuai dengan status bidang formulir:
NG-EMPTY
ng-not-mempty
NG-touched
NG-UNTUCTED
ng-valid
NG-INVALID
NG-DIRTY
ng-sting
ng-pristine