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