Είδη 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.

Παράδειγμα

Αυξάνει τη μεταβλητή count όταν το ποντίκι μετακινείται πάνω από το στοιχείο H1:

<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>Pizza</div>  
  <div>Spaghetti</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 Η συνάρτηση χρησιμοποιώντας !Αριθμητικοί (μη) επιλογείς, μετατρέπει showMe Η μεταβλητή ορίζεται με την αντίθετη τιμή της τρέχουσας τιμής της.

$event όντικο

Μπορείτε να χρησιμοποιήσετε τη συνάρτηση $event Όντικο μεταφέρεται ως παράμετρος.

$event Το αντικείμενο περιέχει το αντικείμενο γεγονότων του προγράμματος περιήγησης:}}

Παράδειγμα

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Μετακινήστε το ποντίκι σας πάνω μου!</h1>
<p>Συντεταγμένες: {{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>

Δοκιμάστε το προσωπικά