AngularJS NG-Model-Richtlinie
Die NG-Modell-Anweisung wird verwendet, um Anwendungsdaten an den Wert des HTML-Controllers (Eingabe, Auswahl, TextArea) zu binden.
NG-Model-Befehl
Die NG-Model-Direktive bindet den Wert des Eingangsfeldes an eine durch AngularJS erzeugte Variable.
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> name: <input ng-model = "name"> </div> <script> var app = angular.module ('myapp', []); App.Controller ('myctrl', function ($ scope). Domäne zu den Eigenschaften des Controllers. </p> </body> </html>Auslaufergebnisse:
Name:Verwenden Sie die NG-Model-Direktive, um den Wert des Eingangsfeldes an die Eigenschaften des Controllers zu binden.
Zwei-Wege-Bindung
Die bidirektionale Bindung wird beim Modifizieren des Wertes des Eingangsfeldes auch der Wert der AngularJS -Eigenschaft geändert:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> name: <input ng-model = "name"> <h1> Sie haben eingegeben: {{name}} </h1> </div> <script> var app = angular.module ('myapp', []); Doe ";}); </script> <p> Ändern Sie den Wert des Eingangsfelds, und der Titelname wird ebenfalls entsprechend geändert. </p> </body> </html>Auslaufergebnisse:
Name:
Sie sind eingetreten: John Doe
Ändern Sie den Wert des Eingangsfelds, und der Titelname wird ebenfalls entsprechend geändert.
Überprüfen Sie die Benutzereingabe
AngularJS -Instanz
<! 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> <body> <body> <body> <body> <body> <body> <body> <body> <body> name = "myaddress" ng-model = "text"> <span ng-show = "myForm.myaddress. Wenn es sich nicht um eine rechtliche E -Mail -Adresse handelt, wird eine schnelle Nachricht angezeigt. </p> </body> </html>
Auslaufergebnisse:
E-Mail:
Geben Sie Ihre E -Mail -Adresse in das Eingabefeld ein. Wenn es sich nicht um eine rechtliche E -Mail -Adresse handelt, wird eine schnelle Nachricht angezeigt.
CSS -Klasse
Die NG-Model-Richtlinie bietet eine CSS-Klasse für HTML-Elemente basierend auf ihrem Staat:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" Lightblue;} </style> </head> <body> <form ng-App = "name =" myForm "> Geben Sie Ihren Namen ein: <input name =" myName "ng-model =" mytext "erforderlich> </Form> <p> Textfelder bearbeiten und die Hintergrundfarben verschiedener Zustände werden zu ändern. </p> <p> Das erforderliche Attribut wird dem erforderlichen Textfeld hinzugefügt und ist illegal, wenn es leer ist. </p> </body> </html>
Auslaufergebnisse:
Bearbeiten Sie das Textfeld, die Hintergrundfarben verschiedener Zustände werden zur Änderung gesendet.
Das Textfeld hat eine erforderliche Eigenschaft hinzugefügt, die erforderlich ist, und ist illegal, wenn sie leer sind.
Die NG-Model-Direktive fügt die folgenden Klassen gemäß dem Status des Formularfelds hinzu:
ng-leer
Ng-nicht-leer
ng-touched
Ng-Otouched
ng-valid
ng-invalid
ng-dirty
ng-ausstehend
Ng-Pristine