AngularJS ပွဲများ

AngularJS တွင် ၎င်း၏ ကိုယ်ပိုင် HTML ဖြစ်ရပ်များ လမ်းညွှန်ချက်များ ရှိသည်။

AngularJS ပွဲများ

ဤညွှန်ကြားချက်များထဲမှ တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ညွှန်ကြားချက်များကို အသုံးပြုခြင်းဖြင့် AngularJS ဖြစ်ရပ်နားဆင်သူများကို သင်၏ HTML အစိတ်အပိုင်းများသို့ ထည့်သွင်းနိုင်သည်-

ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

ပွဲလမ်းညွှန်ချက်များသည် အချို့သောအသုံးပြုသူဖြစ်ရပ်များတွင် AngularJS လုပ်ဆောင်ချက်များကို လုပ်ဆောင်နိုင်စေပါသည်။

AngularJS ဖြစ်ရပ်တစ်ခုသည် HTML ဖြစ်ရပ်တစ်ခုကို ထပ်ရေးမည်မဟုတ်ပါ၊ ဖြစ်ရပ်နှစ်ခုစလုံးကို လုပ်ဆောင်ပါမည်။

ကြွက်ပွဲများ

ဤအစီအစဥ်အတိုင်း ကာဆာသည် ဒြပ်စင်တစ်ခုအပေါ်မှ ရွှေ့သည့်အခါ မောက်စ်ဖြစ်ရပ်များ ဖြစ်ပေါ်သည်-

mouseover ၏
of- mouseenter
ng-mousemove
ng-mouseeleave

သို့မဟုတ် မောက်စ်ခလုတ်ကို ဒြပ်စင်တစ်ခုပေါ်တွင် နှိပ်သည့်အခါ၊

of-mousedown
မောက်စ်
ကလစ်၏

မည်သည့် HTML အစိတ်အပိုင်းတွင်မဆို မောက်စ်ဖြစ်ရပ်များကို သင်ထည့်နိုင်သည်။

ဥပမာ

မောက်စ်သည် H1 ဒြပ်စင်ပေါ်တွင် ရွှေ့သည့်အခါ ကိန်းရှင်ကိန်းရှင်ကို တိုးမြှင့်ပါ-

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

ညွှန်ကြားချက်ကို နှိပ်ပါ။

ညွှန်ကြားချက်သည် ဒြပ်စင်ကိုနှိပ်သည့်အခါ လုပ်ဆောင် မည့် ng-click AngularJS ကုဒ်ကို သတ်မှတ်သည်။

ဥပမာ

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

လုပ်ဆောင်ချက်တစ်ခုကိုလည်း ကိုးကားနိုင်သည်-

ဥပမာ

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>

အဖွင့်အပိတ်၊ မှန်/မမှန်

ခလုတ်တစ်ခုကို နှိပ်လိုက်သောအခါ HTML ကုဒ်၏ ကဏ္ဍတစ်ခုကို ပြသလိုပါက၊ dropdown menu ကဲ့သို့ ခလုတ်ကို ထပ်မံနှိပ်လိုက်သောအခါတွင် ဝှက်ထားလိုပါက၊ ခလုတ်ကို toggle ခလုတ်ကဲ့သို့ ပြုမူလုပ်ဆောင်ပါ-

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
  <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.showMe = false;
  $scope.myFunc = function() {
    $scope.showMe = !$scope.showMe;
  }
});
</script>

ကိန်း showMeရှင်သည် Boolean တန်ဖိုးအဖြစ် စတင်သည် false။

myFuncfunction သည် (not) operator showMeကိုအသုံးပြုခြင်းဖြင့် variable ကို ၎င်းနှင့်ဆန့်ကျင်ဘက်အဖြစ် သတ်မှတ်သည် ။!

$event Object

$eventလုပ်ဆောင်ချက်ကိုခေါ်သောအခါတွင် သင်သည် အရာဝတ္တုအား အငြင်းအခုံတစ်ခုအဖြစ် ကျော်ဖြတ်နိုင်သည် ။

$eventအရာဝတ္ထုတွင် ဘရောက်ဆာ၏ ဖြစ်ရပ်အရာဝတ္တု ပါ၀င်သည် -

ဥပမာ

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

❮ ယခင် နောက်တစ်ခု ❯

ကျူတိုရီရယ်

ဥပမာများ

အကိုးအကား

AngularJS ပွဲများ