inputคำสั่งAngularJS
ตัวอย่าง
ช่องป้อนข้อมูลที่มีการผูกข้อมูล:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
ความหมายและการใช้งาน
AngularJS ปรับเปลี่ยนพฤติกรรมเริ่มต้นของ<input>องค์ประกอบ แต่เฉพาะในกรณีที่ng-modelแอตทริบิวต์มีอยู่
พวกเขาจัดให้มีการเชื่อมโยงข้อมูล ซึ่งหมายความว่าเป็นส่วนหนึ่งของโมเดล AngularJS และสามารถอ้างอิงและปรับปรุง ทั้งในฟังก์ชัน AngularJS และใน DOM
พวกเขาให้การตรวจสอบ ตัวอย่าง: <input>องค์ประกอบที่มีrequiredแอตทริบิวต์ มีการ$validตั้งค่าสถานะไว้
falseตราบเท่าที่ยังว่างอยู่
พวกเขายังให้การควบคุมของรัฐ AngularJS ถือสถานะปัจจุบันขององค์ประกอบอินพุตทั้งหมด
ฟิลด์อินพุตมีสถานะดังต่อไปนี้:
$untouchedยังไม่ได้แตะสนาม$touchedสัมผัสสนามแล้ว$pristineฟิลด์ยังไม่ได้แก้ไข$dirtyฟิลด์ได้รับการแก้ไข$invalidเนื้อหาของฟิลด์ไม่ถูกต้อง$validเนื้อหาของฟิลด์ถูกต้อง
ค่าของแต่ละสถานะแสดงถึงค่าบูลีน และเป็นอย่างใดอย่างหนึ่งtrue
หรือfalse
ไวยากรณ์
<input ng-model="name">
มีการอ้างถึงองค์ประกอบอินพุตโดยใช้ค่าของng-modelแอตทริบิวต์
CSS Classes
<input>องค์ประกอบภายในแอปพลิเคชัน AngularJS จะได้รับบางคลาส คลาสเหล่านี้สามารถใช้เพื่อจัดรูปแบบองค์ประกอบอินพุตตามสถานะ
เพิ่มคลาสต่อไปนี้:
ng-untouchedยังไม่ได้แตะสนามng-touchedสัมผัสสนามแล้วng-pristineฟิลด์ยังไม่ได้แก้ไขng-dirtyฟิลด์ได้รับการแก้ไขng-validเนื้อหาของฟิลด์ถูกต้องng-invalidเนื้อหาของฟิลด์ไม่ถูกต้องng-valid-keyหนึ่งคีย์สำหรับการตรวจสอบแต่ละครั้ง ตัวอย่าง:ng-valid-requiredมีประโยชน์เมื่อมีมากกว่าหนึ่งสิ่งที่ต้องตรวจสอบng-invalid-keyตัวอย่าง:ng-invalid-required
คลาสจะถูกลบออกหากค่าที่แสดงfalseเป็น
ตัวอย่าง
ใช้สไตล์สำหรับองค์ประกอบอินพุตที่ถูกต้องและไม่ถูกต้อง โดยใช้ CSS มาตรฐาน:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>