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 ทั้งสองจะทำงานพร้อมกัน

เหตุการณ์เมาส์

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

• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

หรือ ขณะที่กดองค์ประกอบ จะมีการเรียกใช้ตามลำดับที่ต่อไปนี้

• ng-mousedown
• ng-mouseup
• ng-click

คุณสามารถเพิ่มเหตุการณ์เมาส์บนองค์ประกอบ HTML ใดๆ

ตัวอย่าง

เมื่อเคลื่อนเมาเหนือองค์ประกอบ H1 จะเพิ่มตัวแปร count

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">เคลื่อนเมาเหนือฉัน!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

ทดลองด้วยตัวเอง

คำสั่ง ng-click

ng-click ใบออร์เดอร์กำหนดรหัส AngularJS ที่จะทำงานเมื่อองค์ประกอบที่มีคำสั่งถูกกด

ตัวอย่าง

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">กดฉัน!</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()">กดฉัน!</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()">กดฉัน！</button>  
<div ng-show="showMe">  
  <h1>รายการเมนู：</h1>  
  <div>ปิซซ่า</div>  
  <div>ซาลาดอิตาลี</div>  
  <div>สินค้าทะเล</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 ฟังก์ชันผ่านทาง !ตัวเลขเชิงเสนอน (non-) สัญญาณ showMe ตัวแปรจะถูกตั้งค่าเป็นค่าตรงกันข้ามกับค่าปัจจุบัน

$event วัตถุ

สามารถใช้ $event วัตถุเป็นตัวแปรที่ถูกส่งผ่าน

$event วัตถุมีตัวแทนกิจกรรมเบราเซอร์

ตัวอย่าง

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">เคลื่อนย้ายเมาส์ขึ้นย่อม!</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>

ทดลองด้วยตัวเอง