– NgClick Direktifi
Ngclick direktifi javascriptteki onclick ile birebir aynı işlevi taşımaktadır. Eklendiği buton click işlemi gerçekleştirildiğinde tetiklenecek fonksiyonu içerisinde barındırır ve çalıştırır. Bu olay ng-click içerisinde belirtilmiş tek bir işlem olabileceği gibi bir fonksiyon da olabilir.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script>
var modul = angular.module("MyModule", []);
modul.controller("MyController", function ($scope) {
$scope.sayi1 = 0;
$scope.sayi2 = 0;
$scope.artir = function ()
{
$scope.sayi1 = $scope.sayi1 + 1;
$scope.sayi2 = $scope.sayi2 - 1;
}
});
</script>
</head>
<body ng-app="MyModule" ng-controller="MyController">
{{sayi1}} *** {{sayi2}} <br />
<input type="button" value="artir" ng-click="artir()"/>
</body>
</html>
Diğer mouse izleyici eventler
ng-dblclick = “–event–” : Mouse tuşuna 2 kez basıldığı an olayı tetikler.
ng-mousedown = “–event–“ : Mouse tuşuna basıldığı ilk an tetiklenir.
ng-mouseup = “–event–“ : Basılı mouse tuşu bırakıldığı an tetiklenir.
ng-mouseenter = “–event–“ : Bu izleyici, mouse imleci ilgili tagin sınırlarına girdiği an otomatik olarak tetiklenir. Örneğin bir div’e bu ng’yi verirseniz, mouse imleci bu divin içerisinde girdiğinde ilgili olay tetiklenecektir.
ng-mouseleave = “–event–” : Bu izleyici, mouse imleci ilgili tagin sınırlarının dışına çıktığı an otomatik olarak tetiklenir. Örneğin bir div’e bu ng’yi verirseniz, mouse imleci bu divin içerisinden dışarısına çıktığı an olay tetiklenecektir.
– NgRepeat Direktifi
Ngrepeat direktifini C#’taki foreach gibi düşünebilirsiniz. İçerisindeki arrayin elemanları için her seferinde ekrana bir tag bastırır.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script>
var modul = angular.module("MyModule", []);
modul.controller("MyController", function ($scope) {
$scope.ListArray["Ali", "Veli", "Ahmet"];
});
</script>
</head>
<body ng-app="MyModule" ng-controller="MyController">
<table>
<tr>
<td ng-repeat="isim in ListArray"> {{isim}} </td> <!--Listarraydeki her bir eleman için bir <td><td> tagi bastır-->
</tr>
</table>
</body>
</html>