ตัวอย่าง
สนามการป้อนข้อมูลที่มีการผูกข้อมูล:
<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
<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>
ลองตัวเอง»