AngularJS ပုံစံ

AngularJS တွင် အေဂျင်စီဂိုး ကုန်းအချက်အလက် အချင်းချင်း အသုံးပြုပြီး အတည်ပြုပါသည်。

အချင်းချင်း

အချင်းချင်း အား အသုံးပြုပါသည်

• input အစား
• select အစား
• button အစား
• textarea အစား

အချင်းချင်း

အချင်းချင်း အား အသုံးပြုပါသည် ng-model အမိန့် အား အေဂျင်စီဂိုး ကို သတ်မှတ်ပါသည် နှင့် အေဂျင်စီဂိုး ကို အသုံးပြုပါသည်。

<input type="text" ng-model="firstname">

အေဂျင်စီဂိုး ကို firstname အချင်းချင်း

ng-model အမိန့် အား အေဂျင်စီဂိုး ကို သတ်မှတ်ပါသည် နှင့် သူ၏ အေဂျင်စီဂိုး ကို အေဂျင်စီဂိုး အား အသုံးပြုပါသည်。

အချင်းချင်း firstnameအခြား

实例

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
});

亲自试一试

အခြား အေဂျင်စီဂိုး အချင်းချင်း အခြား နေရာများ တွင် အသုံးပြုနိုင်ပါသည်:

实例

<form>
  အမည်: <input type="text" ng-model="firstname">
</form>
<h1>သင့် အမည်ကို ဖြည့်ပါ:</h1>

亲自试一试

အမိန့်

အမိန့် အချင်းချင်း true 或 falseအမိန့် ng-model အမိန့် အား အေဂျင်စီဂိုး ကို သတ်မှတ်ပါသည် နှင့် သူ၏ အေဂျင်စီဂိုး ကို အေဂျင်စီဂိုး အား အသုံးပြုပါသည်。

实例

အမည်ကို ရွေးချယ်လျှင် ပြသပါသည်:

<form>
  အမည်ကို ပြသပါလျှင် ရွေးချယ်ပါ:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">ကျော်ကြီးအမည်</h1>

亲自试一试

တိုင်းတာတံဆိပ်

使用 ng-model အမိန့် အား သူ၏ အေဂျင်စီဂိုး ကို သတ်မှတ်ပါသည်。

အခြား ng-model တိုင်းတာတံဆိပ်၏ တိုင်းတာတံဆိပ် အချင်းချင်း အခြား ကိန်းကြောင်း ရှိ သော်လည်း ရွေးချယ်ထားသော ကိန်းကြောင်းသာ အသုံးပြုပါသည်。

实例

ရွေးချယ်ထားသော တိုင်းတာတံဆိပ်အရ စာကြောင်းများ ပြန်ပေးပါသည်:

<form>
  နိုင်ငံခြားနိုင်ငံကိုယူယူပါ:
  <input type="radio" ng-model="myVar" value="dogs">ဆိုင်း
  <input type="radio" ng-model="myVar" value="tuts">အေဂျင်စီဂိုး
  <input type="radio" ng-model="myVar" value="cars">ကားပေါင်း
</form>

亲自试一试

myVar的值将是 dogs、tuts 或 cars。

下拉选择框

使用 ng-model 指令将下拉选择框绑定到您的应用程序。

ng-model 属性中定义的属性将具有选择框中所选选项的值。

实例

根据选定的选项值显示一些文本：

<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

亲自试一试

myVar 的值将是 dogs、tuts 或 cars。

AngularJS 表单示例

应用程序代码

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">重置</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  }
  $scope.reset();
});

亲自试一试

novalidate 属性是 HTML5 中的新属性。它禁用任何默认浏览器验证。

အကြောင်းကြား အကျိုးသတ္တု

ng-app အကူအညီ အရာ အောက်ပိုင်း ကို အသုံးပြုသည်

ng-controller အကူအညီ အရာ အစိုးရ ကို အသုံးပြုသည်

ng-model အကူအညီ အရာ နှစ်ခု အပေါ် ပေါင်းစပ်ထားသည်

formCtrl အစိုးရ master အရာ အစားထိုး ပြီး အခြေခံ reset() နည်းလမ်း

reset() အကူအညီ အရာ အစားထိုး ပြီး အခြေခံ user အရာ အစားထိုး ကို master အရာ

ng-click အကူအညီ သာ ခုံးလွှာ တစ်ခု တွင် ခေါ်ဆိုလျှင် ခေါ်ဆိုသည် reset() နည်းလမ်း

ဒီ အောက်ပါ အကိုင်းကြား မပါဘဲ။ သို့သော် အချိန်မှာ အင်္ဂလိပ် HTML5 စစ်ဆေးခြင်း အား ကျယ်ပြီး ပြောင်းလဲခြင်းကို ဖော်ထုတ်လိုက်သည်။