AngularJS inputညွှန်ကြားချက်
ဥပမာ
ဒေတာစည်းနှောင်မှုရှိသော ထည့်သွင်းအကွက်-
<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$validfalse
သူတို့က နိုင်ငံတော်ကို ချုပ်ကိုင်ပေးတယ်။ AngularJS သည် input ဒြပ်စင်အားလုံး၏ လက်ရှိအခြေအနေကို ထိန်းထားသည်။
ထည့်သွင်းသည့်အကွက်များတွင် အောက်ပါအခြေအနေများ ရှိသည်။
$untouchedလယ်ကို မထိရသေးဘူး။$touchedလယ်ကွင်းတွေထိတယ်။$pristineအကွက်ကို မပြင်ရသေး$dirtyအကွက်ကို ပြုပြင်ပြီးပါပြီ။$invalidအကွက်အကြောင်းအရာသည် မမှန်ကန်ပါ။$validနယ်ပယ်အကြောင်းအရာသည် တရားဝင်သည်။
ပြည်နယ်တစ်ခုစီ၏တန်ဖိုးသည် Boolean တန်ဖိုးကိုကိုယ်စားပြုပြီး တစ်ခုခု 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>