AngularJS HTML ပင်မစာမျက်နှာ


AngularJS တွင် အပလီကေးရှင်းဒေတာကို HTML DOM ဒြပ်စင်များ၏ အရည်အချင်းများနှင့် ပေါင်းစပ်ရန် ညွှန်ကြားချက်များ ရှိသည်။


ng-disabled ညွှန်ကြားချက်

ng-disabled ညွှန်ကြားချက်သည် AngularJS အပလီကေးရှင်းဒေတာကို HTML ဒြပ်စင်များ၏ disabled attribute နှင့် ပေါင်းစပ်ထားသည်

AngularJS ဥပမာ

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>

<p>
{{ mySwitch }}
</p>

</div>

လျှောက်လွှာကိုရှင်းပြခဲ့သည်

ng-disabled ညွှန်ကြားချက်သည် အပလီကေးရှင်းဒေတာ mySwitch ကို HTML ခလုတ်၏ disabled attribute သို့ ပေါင်းစည်းသည်။

ng-model ညွှန်ကြားချက်သည် HTML checkbox ဒြပ်စင်၏တန်ဖိုးကို mySwitch တန်ဖိုးနှင့် ပေါင်းစပ် ထားသည်။

mySwitch ၏တန်ဖိုးသည် မှန် သည်ဟု အကဲဖြတ်ပါ က ၊ ခလုတ်ကို ပိတ်ထားပါမည်- 

<p>
<button disabled>Click Me!</button>
</p>

mySwitch ၏တန်ဖိုးသည် false အဖြစ် အကဲဖြတ်ပါက ၊ ခလုတ်ကို ပိတ်မည်မဟုတ်ပါ။ 

<p>
<button>Click Me!</button>
</p>


ng-show ညွှန်ကြားချက်

ng-show လမ်းညွှန် သည် HTML ဒြပ်စင်တစ်ခုကို ပြသ သို့မဟုတ် ဝှက်ထားသည်။

AngularJS ဥပမာ

<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>

ng-show လမ်းညွှန်သည် ng-show ၏ တန်ဖိုး အပေါ်အခြေခံ၍ HTML ဒြပ်စင်တစ်ခုအား ပြသသည် (သို့မဟုတ်) ဖျောက်ထားသည် ။

သင်သည် မှန်သည် သို့မဟုတ် မှားသည်ဟု အကဲဖြတ်သည့် မည်သည့်အသုံးအနှုန်းကိုမဆို သုံးနိုင်သည်။

AngularJS ဥပမာ

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">I am visible.</p>

</div>

နောက်အခန်းတွင်၊ HTML ဒြပ်စင်များကိုဖျောက်ရန် ခလုတ်ကိုနှိပ်ခြင်းဖြင့် နောက်ထပ်ဥပမာများရှိပါသည်။


ng-hide ညွှန်ကြားချက်

ng-hide လမ်းညွှန် သည် HTML ဒြပ်စင်တစ်ခုအား ဝှက်ထားသည် သို့မဟုတ် ပြသသည်။

AngularJS ဥပမာ

<div ng-app="">

<p ng-hide="true">I am not visible.</p>

<p ng-hide="false">I am visible.</p>

</div>