เหตุการณ์ 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 ทั้งสองเหตุการณ์จะถูกดำเนินการ

กิจกรรมเมาส์

เหตุการณ์ของเมาส์เกิดขึ้นเมื่อเคอร์เซอร์เคลื่อนที่เหนือองค์ประกอบ ตามลำดับนี้:

ของเมาส์โอเวอร์
ของ mouseenter
ng-mousemov
ng-mouseave

หรือเมื่อคลิกปุ่มเมาส์บนองค์ประกอบ ตามลำดับนี้:

ของ 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 เมื่อมีการคลิกปุ่ม และซ่อนเมื่อคลิกปุ่มอีกครั้ง เช่น เมนูแบบเลื่อนลง ให้ปุ่มทำงานเหมือนสวิตช์เปิดปิด:

<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เริ่มต้นเป็นค่าบูลีfalseน

ฟัง ก์myFuncชั่นตั้งค่าshowMeตัวแปรให้ตรงกันข้ามกับสิ่งที่เป็นโดยใช้ตัวดำเนินการ!(ไม่ใช่)

$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