Bacaan terkait:
Tutorial Pengantar AngularJS: Ekspresi AngularJS
Tutorial Pengantar AngularJS: Arahan AngularJS
Dalam tutorial sebelumnya tentang ekspresi dan arahan, diketahui bahwa model AngularJS (NG-model) dapat mengikat nilai dalam bidang input HTML ke variabel yang dibuat oleh 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="" ng-init="name='Jone Snow'">Name: <input ng-model = "name"> </div> </body> </html>
Ikatan pengikat dua arah dugih binding dua mengacu pada pengikatan-model NG ke domain input HTML, dan juga ke atribut AngularJS. Oleh karena itu, ketika nilai domain input berubah, nilai atribut AngularJs juga akan berubah.
<!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 Snow"; Nama judul juga akan dimodifikasi sesuai. </p> </body> </html>Status Aplikasi NG-Model Directive dapat memberikan nilai status untuk data aplikasi.
kotor Ketika data dimodifikasi, statusnya benar, dan belum dimodifikasi menjadi salah. Bahkan jika dimodifikasi ke nilai aslinya, itu benar.
Valid Nilai input benar ketika itu legal, dan salah jika tidak sah.
Disentuh oleh layar sentuh mengklik sebagai benar, tanpa menyentuh sebagai false.
Terapkan gaya CSS menurut status
<! 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> <weepty> <weady> input.min.js "> </script> </head> <body> <weepty> input.min.js"> </script> </head> <body> heady> input.min.js "> </script> </head> <body> heading> input.min LightBlue;} </tyle> <body> <bentuk ng-app = "" name = "myForm"> Masukkan nama Anda: <input name = "myAddress" ng-model = "text" diperlukan> </form> </body> </html>
Bidang input menambahkan status yang diperlukan. Ketika tidak ada input di bidang input, model NG menambahkan gaya NG-invalid ke bidang input. Jika tidak, lepaskan gaya NG-Invalid. The ng-model directive adds/removes the following styles according to the status of the form field: - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-pending - ng-pristine Use ng-model to verify the mailbox format
<! 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> </body> </html>
Ketika myForm.myaddress. $ Error.email Atribut benar (format kotak surat salah), NG-Show akan mengontrol tampilan konten rentang.
Konten di atas adalah model AngularJS yang diperkenalkan oleh editor kepada Anda oleh tutorial pengantar AngularJS. Saya harap ini akan membantu semua orang!