Wie in der obigen Abbildung gezeigt, müssen wir die folgenden Überprüfungsfunktionen implementieren:
Steuerelemente sind erforderliche Steuerelemente
Alle müssen die maximale Länge steuern
Wenn die Seite zum ersten Mal geöffnet wird, kann die Steuerung nicht als Fehlerstatus angezeigt werden
Nachdem der Eingangsinhalt gelöscht wurde, muss die erforderliche Eingabesteuerung als Fehlerstatus angezeigt werden
Die Schaltfläche zur Veröffentlichung kann erst verfügbar sein, nachdem alle Eingaben gültig sind.
Bei AngularJS können wir diese Anforderungen problemlos implementieren. Es ist nur 1 Zeile des JS -Codes erforderlich. Der UI -Stil verwendet hier Bootstrap. Beginnen wir mit dem Beispielcode:
Html.
<! DocType html> <html Lang = "zh-cn" ng-App = "ftitapp"> <head> <meta charset = "utf-8"/> <title> Demo </title> <link href = "/content/bootstrap.css" rel = "StyleSheet"/> <script "/> <script"/> <script "/> < src="/Scripts/angular.js"></script></head><body> <div> <!-- Main content area--> <div> <div> <!-- Contact us form area--> <form action="/Contact/Create" method="post" role="form" name="createContactForm" ng-controller="ContactCreateController"> <!-- UserName Your name--> <div ng-class = "{'has-success' :! createContactform.username. $ Pristine && createContactform.username. ng-model = "userername" name = "userername" autofocus = "" Erforderlich ng-maxLength = 30> <div ng ng-show = "createContactform.username. CreateContactForm.Unername. $ Invalid "> <span> </span> </div> <!-UserMail-E-Mail-Adresse-> <div ng-class =" {'Has-SUCCESS' :! CreateContactform.usermail. createContactForm.usermail. $ Invalid} "> <Label für =" UsMail "> E-Mail-Adresse*</Label> <Eingabe-Typ =" E-Mail "ng-model =" usermail "name =" usermail "Erforderlich ng-maxLength = 30> <div ng-show ="! <div ng-show = "! createContactform.usermermail. $ Pristine && createContactForm.UserMail. ! CreateContactForm.Subject. <span> </span> </div> <div ng-show = "! CreateContactForm.Subject. $ Pristine && createContactForm.Subject. $ Invalid"> <span> </span> </div> </div> <!-Inhalt-> <div ng-class = "{{{Hascose-seccess CreateContactform.Content. ng-show = "! createContactform.content. $ Pristine && createContactform.content. ng-show = "createContactForm. value = "veröffentlichen" ng-disabled = '! createContactform. src = "/scripts/ftit/contactCreateController.js"> </script> </body> </html>JS -Code (es ist wirklich nur eine Zeile)
ContractCreateController.js
var ftitAppmodule = angular.module ('ftitapp', []);Das ist in Ordnung. Ein paar wichtige Punkte zu erklären:
NG-Klasse: Dieses Tag wird verwendet, um den Wert der Klasse zu steuern. Zum Beispiel ng-class = "{'has-success' :! createContactForm.content.
NG-Show: Steuert, ob das Steuerelement angezeigt wird.
CreateContactForm.
CreateContactForm.Content.
CreateContactForm.Content. $ Pristine: Identifiziert, ob die Inhaltskontrolle noch nie eingegeben wurde. Es wird nie als wahr eingegeben, sonst ist es falsch
Weitere detailliertere technische Probleme finden Sie in der technischen Dokumentation von AngularJS.