အင်ဂလ်ဂရီJS နောက်ခံ အမှုအမှန်

ng-model အင်တာဗက် ကို အခြေအနေ ကို အင်တာဗက် ကို အတူ ပတ်ဝန်းကျင် ပေးသည် (input, select, textarea) အခြေအနေ

ng-model အင်တာဗက်

အသုံးပြုပါ ng-model အင်တာဗက် အကိုးအခံ ကို အကွက် အချက်အလက် ကို အတူ ပတ်ဝန်းကျင် ပေးနိုင်သည်။ အင်္ဂလိပ်ဂျူး အကိုးအခံ ကို အကွက် အချက်အလက် ကို အတူ ပတ်ဝန်းကျင် ပေးနိုင်သည်။

အမှတ်အသား

<div ng-app="myApp" ng-controller="myCtrl">
  အမည်: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

အတူ ပတ်ဝန်းကျင်

သတ်မှတ်ထားသော အခြေအနေ အချက်အလက် နှင့် အကွက် အကိုးအခံ အကွက် ကို အတူ ပတ်ဝန်းကျင်သည်။ အသုံးပြုသူ အကွက် အရ အကွက် အချက်အလက် ကို ပြောင်းလဲလျှင်၊ အင်္ဂလိပ်ဂျူး ဗဟုသုတအချက်အလက် က ပြောင်းလဲလိမ့်မည်။

အမှတ်အသား

<div ng-app="myApp" ng-controller="myCtrl">
  အမည်: <input ng-model="name">
  <h1>သင်က ဖြည့်ခဲ့သည်: {{name}}</h1>
</div>

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

အသုံးပြုသူ ဖြည့်ဖြည့်ခြင်း သတ်မှတ်ထားသည်

ng-model အင်တာဗက် အကိုးအခံ အခြေအနေ (နှစ်မျိုး၊ အိမ်ရှင်နယူးယာဉ်၊ ပါဝင်သင့်သည်) ကို ပေးနိုင်သည်:

အမှတ်အသား

<form ng-app="" name="myForm">
  အိမ်ရှင်နယူးယာဉ်:
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

အထို အကျိုးသတ္တုပြုခြင်း တွင်၊ ng-show ဗဟုသုတအရ အချက်အလက် က ပြန်လည်ပေးသည် true အခြေအနေ ဖြစ်ပါက၊ span ကို ပြသတည်း။

အကြောင်း ng-model ဗဟုသုတအရ ဗဟုသုတအရ အခြေအနေ ကျပါရှိသေးသော အချက်အလက် တစ်ခု မရှိသေးဘဲကားပါ၊ အင်္ဂလိပ်ဂျူး က သင့်အတွက် တည်ဆောက်ပေးလိမ့်မည်။

အင်တာဗက် အခြေအနေ

ng-model အင်တာဗက် အကိုးအခံ အခြေအနေ (အကျိုးဆက်သည်၊ အရေးပါသည်၊ ထိန်းချုပ်ထားသည်၊ အမှားရှိသည်) ကို ပေးနိုင်သည်:

အမှတ်အသား

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  အိမ်ရှင်နယူးယာဉ်:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>အခြေအနေ</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}
</form>

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

ခွဲခြားသော အကွက်

ng-model အင်တာဗက် အကိုးအခံ အခြေအနေ အရ ချက်အရာ ကို ခွဲခြားသော အကွက် ပေးသည်:

အမှတ်အသား

<style>
input.ng-invalid {
  background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
  သင်၏ အမည် ဖြည့်ပေးလို့
  <input name="myName" ng-model="myText" required>
</form>

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

ng-model အေဒီ အပိုင်း အခြေအနေ အရေးပါ အေဒီ ပေါ်တွင် ထို့အပိုင်း အေဒီ ထပ်ပေါ်ခြင်း/ဖယ်ရှားခြင်း

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine