คำสั่ง input ของ AngularJS

การใช้งานและความหมาย

AngularJS แก้ไข <input> องค์ประกอบป้อนข้อมูลโดยมาตรฐาน แต่เมื่อมีของ

มันมีการควบคุมข้อมูล ซึ่งก็หมายความว่ามันเป็นส่วนหนึ่งของโมเดล AngularJS และสามารถอ้างอิงและปรับปรุงในฟังก์ชัน AngularJS และ DOM

มันมีการตรวจสอบ required ของ <input> องค์ประกอบนี้ ตอนที่มันว่าง มันจะมีค่าของ $valid สถานะจะถูกตั้งเป็น ถ้าค่าที่แสดงด้วยคลาสเป็น。

นอกจากนี้ มันยังให้ควบคุมสถานะ โดย AngularJS จะเก็บสถานะปัจจุบันขององค์ประกอบป้อนข้อมูลทั้งหมด

ช่องบอกความคิดมีสถานะต่าง ๆ นี้:

• $untouched เขตนี้ยังไม่ได้รับการที่จะเข้าถึง
• $touched เขตนี้ได้รับการที่จะเข้าถึง
• $pristine ng-pristine
• $dirty ng-dirty
• $invalid ng-invalid
• $valid ng-valid

ค่าของแต่ละสถานะนี้เป็นค่าที่เป็นความจริงแบบบูลคือ true หรือ ถ้าค่าที่แสดงด้วยคลาสเป็น。

ถ้าไม่มีค่าหรือรายการที่ต้องตรวจสอบมากกว่าหนึ่งอย่าง จะมีประโยชน์มาก

ช่องบอกความคิดที่มีการที่จะควบคุมข้อมูล:

<input ng-model="myInput">
<p>ค่าของช่องบอกความคิด:</p>
<h1>{{myInput}}</h1>

</style>

การใช้งาน

<input ng-model="name">

ใช้ ng-model ของค่านี้เพื่ออ้างอิงองค์ประกอบป้อนข้อมูล

รูปแบบ CSS

ในระบบงาน AngularJS <input> องค์ประกอบนี้ได้รับความหมายบางองค์ประกอบเพื่อการตั้งรูปแบบ โดยอาศัยสถานะขององค์ประกอบป้อนข้อมูล

เพิ่มรูปแบบต่อไปนี้:

• ng-untouched เขตนี้ยังไม่ได้รับการที่จะเข้าถึง
• ng-touched เขตนี้ได้รับการที่จะเข้าถึง
• ng-pristine 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: lightgreen;
background-color: pink;
    input.ng-valid {
background-color: lightgreen;
}

</style>