AngularJS လျှောက်လွှာ
တကယ့် AngularJS Application တစ်ခုကို ဖန်တီးဖို့ အချိန်တန်ပါပြီ။
စျေးဝယ်စာရင်းတစ်ခုလုပ်ပါ။
ပစ္စည်းများကိုထည့်ရန် သို့မဟုတ် ဖယ်ရှားနိုင်သည့် စျေးဝယ်စာရင်းတစ်ခုပြုလုပ်ရန် AngularJS အင်္ဂါရပ်အချို့ကို အသုံးပြုကြပါစို့-
ကျွန်ုပ်၏စျေးဝယ်စာရင်း
- နို့×
- မုန့်×
- ဒိန်ခဲ×
လျှောက်လွှာကို ရှင်းပြထားသည်။
အဆင့် 1. စတင်ခြင်း-
ဟုခေါ်သော အက်ပလီကေးရှင်းတစ်ခု ဖန်တီးခြင်းဖြင့် စတင်ပြီး myShoppingList၎င်းတွင် အမည်ရှိသော ထိန်းချုပ်ကိရိယာတစ်ခုကို ထည့်ပါ myCtrl။
productsထိန်းချုပ်သူ သည် လက်ရှိတွင်
အမည်ပေးထားသော array တစ်ခုကို ပေါင်းထည့်သည် $scope။
HTML တွင်၊ ng-repeatကျွန်ုပ်တို့သည် array ရှိအရာများကို အသုံးပြု၍ စာရင်းတစ်ခုပြသရန် ညွှန်ကြားချက်ကိုအသုံးပြုသည်။
ဥပမာ
ယခုအချိန်အထိ ကျွန်ုပ်တို့သည် array တစ်ခု၏ အကြောင်းအရာများကို အခြေခံ၍ HTML စာရင်းကို ပြုလုပ်ထားပါသည်။
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
အဆင့် 2. ပစ္စည်းများထည့်ခြင်း-
ng-model
HTML တွင်၊ စာသားအကွက်တစ်ခုထည့်ပါ၊ ညွှန်ကြားချက် ဖြင့် ၎င်းကို အပလီကေးရှင်းတွင် ချိတ်ပါ ။
ထိန်းချုပ်ကိရိယာတွင်၊ အမည်ရှိ လုပ်ဆောင်ချက်တစ်ခုကို ပြုလုပ်ပြီး array တွင် အရာတစ်ခုကို ထည့်ရန် ထည့်သွင်းမှုအကွက် addItem၏ တန်ဖိုးကို အသုံးပြု ပါ။addMeproducts
ခလုတ်တစ်ခုထည့်ပါ၊ ခလုတ်ကိုနှိပ်လိုက် သောအခါ ng-clickတွင် လုပ်ဆောင်ချက်ကို လုပ်ဆောင်ပေးမည့် လမ်းညွှန်ချက် တစ်ခု addItemပေးပါ။
ဥပမာ
ယခု ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏စျေးဝယ်စာရင်းတွင် ပစ္စည်းများထည့်နိုင်သည်-
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
အဆင့် 3. ပစ္စည်းများကို ဖယ်ရှားခြင်း-
စျေးဝယ်စာရင်းမှ ပစ္စည်းများကိုလည်း ဖယ်ရှားလိုပါသည်။
removeItemထိန်းချုပ်ကိရိယာတွင်၊ က န့်သတ်ချက်တစ်ခုအနေဖြင့် သင်ဖယ်ရှားလိုသည့်အရာ၏အညွှန်းကို ယူမည့် အမည်ရှိ လုပ်ဆောင်ချက်တစ်ခု ပြုလုပ်ပါ။
HTML တွင်၊ အကြောင်းအရာ <span>တစ်ခုစီအတွက် ဒြပ်စင်တစ်ခုပြုလုပ်ပြီး ၎င်းတို့အား
လုပ်ဆောင်ချက်အား လက်ရှိဖြင့် ng-clickခေါ်သည့် ညွှန်ကြားချက်တစ်ခုပေးလိုက်ပါ ။removeItem$index
ဥပမာ
ယခု ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ စျေးဝယ်စာရင်းမှ ပစ္စည်းများကို ဖယ်ရှားနိုင်ပါပြီ-
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
အဆင့် 4. ကိုင်တွယ်မှု အမှား-
အပလီကေးရှင်းတွင် တူညီသောအရာကို နှစ်ကြိမ်ထည့်ရန်ကြိုးစားပါက အပလီကေးရှင်းပျက်သွားသကဲ့သို့ အချို့သော အမှားအယွင်းများရှိသည်။ ထို့အပြင် အလွတ်ပစ္စည်းများကို ထည့်ခွင့်မပြုသင့်ပါ။
ပစ္စည်းအသစ်မထည့်မီ တန်ဖိုးကို စစ်ဆေးခြင်းဖြင့် ၎င်းကို ပြုပြင်ပါမည်။
HTML တွင် အမှားအယွင်း မက်ဆေ့ချ်များအတွက် ကွန်တိန်နာတစ်ခု ပေါင်းထည့်မည်ဖြစ်ပြီး တစ်စုံတစ်ဦးမှ ရှိပြီးသားအရာတစ်ခုကို ထည့်ရန် ကြိုးပမ်းသောအခါတွင် အမှားအယွင်း မက်ဆေ့ချ်တစ်ခုကို ရေးပါမည်။
ဥပမာ
အမှားအယွင်း မက်ဆေ့ချ်များရေးရန် ဖြစ်နိုင်ခြေရှိသော စျေးဝယ်စာရင်း-
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products
= ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe)
== -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already
in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList"
ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">
{{x}}<span ng-click="removeItem($index)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>
အဆင့် 5. ဒီဇိုင်း-
အပလီကေးရှင်းသည် အလုပ်လုပ်သော်လည်း ပိုမိုကောင်းမွန်သော ဒီဇိုင်းကို အသုံးပြုနိုင်သည်။ ကျွန်ုပ်တို့၏အပလီကေးရှင်းကိုပုံစံသတ်မှတ်ရန် W3.CSS စတိုင်စာရွက်ကိုအသုံးပြုသည်။
W3.CSS စတိုင်စာရွက်ကို ပေါင်းထည့်ကာ အပလီကေးရှင်းတစ်လျှောက် သင့်လျော်သော အတန်းများကို ထည့်သွင်းပါ၊ ရလဒ်သည် ဤစာမျက်နှာ၏ထိပ်ရှိ စျေးဝယ်စာရင်းနှင့် အတူတူပင်ဖြစ်လိမ့်မည်။
ဥပမာ
W3.CSS စတိုင်စာရွက်ကို အသုံးပြု၍ သင့်အပလီကေးရှင်းကို ပုံစံထုတ်ပါ-
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">