AngularJS input
निर्देश
उदाहरण
डेटा-बाइंडिंग वाला एक इनपुट फ़ील्ड:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
परिभाषा और उपयोग
AngularJS <input>
तत्वों के डिफ़ॉल्ट व्यवहार को संशोधित करता है, लेकिन केवल तभी जब ng-model
विशेषता मौजूद हो।
वे डेटा-बाइंडिंग प्रदान करते हैं, जिसका अर्थ है कि वे एंगुलरजेएस मॉडल का हिस्सा हैं, और इन्हें एंगुलरजेएस फ़ंक्शंस और डीओएम दोनों में संदर्भित और अपडेट किया जा सकता है।
वे सत्यापन प्रदान करते हैं। उदाहरण: एक विशेषता वाला एक <input>
तत्व , जब तक यह खाली रहता है , तब तक राज्य सेट
होता है।required
$valid
false
वे राज्य नियंत्रण भी प्रदान करते हैं। AngularJS सभी इनपुट तत्वों की वर्तमान स्थिति रखता है।
इनपुट फ़ील्ड में निम्नलिखित अवस्थाएँ होती हैं:
$untouched
मैदान को अभी तक छुआ नहीं गया है$touched
मैदान को छुआ गया है$pristine
फ़ील्ड को अभी तक संशोधित नहीं किया गया है$dirty
क्षेत्र को संशोधित किया गया है$invalid
फ़ील्ड सामग्री मान्य नहीं है$valid
फ़ील्ड सामग्री मान्य है
प्रत्येक राज्य का मान एक बूलियन मान का प्रतिनिधित्व करता है, और या तो true
या है false
।
वाक्य - विन्यास
<input ng-model="name">
ng-model
विशेषता के मूल्य का उपयोग करके इनपुट तत्वों को संदर्भित किया जा रहा है ।
सीएसएस कक्षाएं
<input>
एंगुलरजेएस एप्लिकेशन के अंदर के तत्वों को कुछ वर्ग दिए गए हैं । इन वर्गों का उपयोग इनपुट तत्वों को उनके राज्य के अनुसार स्टाइल करने के लिए किया जा सकता है।
निम्नलिखित वर्ग जोड़े गए हैं:
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>