ben

OMÜ , Bilgisayar Mühendisliği, 13'

31 Ekim 2018 Çarşamba

Yapısal direktifler 3



ng-checked: Verinin seçili olup olmama durumunu kontrol eder

<html >
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="checkbox" ng-model="all"> Check all<br><br>
<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes
<p>Click "Check all" to check all three cars.</p>
</body>
</body>
</html> 

ng-click:  Mouse tek tıklama olayını tetikler

ng-dblclick: Mouse çift tıklama olayını tetikler


<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body>
<style>
.kutu {width:100px; height:100px;
       background:#ccc; margin:20px;}
</style>
</head>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
  <div class="kutu" ng-click="f1()"> tek tıkla</div>
  <div class="kutu" ng-dblclick="f2()">cift tıkla</div>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
  uygulama.controller("ngKontrol", function($scope){
    $scope.f1 = function(){
      alert("ng-click ile Tetiklendi!");
    }
    $scope.f2 = function(){
      alert("ng-dblclick ile Tetiklendi!");
    }
  });
</script>
</body>
</html>


ng-mousedown: Mouse tıklama başladığında tetiklenir

ng-mouseup: Mouse tıklama sona erdiğinde tetiklenir


<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body>
<style>
.kutu {width:100px; height:100px;
       background:#ccc; margin:20px;}
</style>
</head>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
  <div class="kutu" ng-mousedown="f1()" ng-mouseup="f2()"></div>
  {{durum}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
  uygulama.controller("ngKontrol", function($scope){
    $scope.durum = "Sayfa yüklendi.";
    $scope.f1 = function(){
      $scope.durum = "Tıklama başladı.";
    }
    $scope.f2 = function(){
      $scope.durum = "Tıklama sona erdi.";
    }
  });
</script>
</body>
</html>




ng-mouseenter: Mouse üzerine geldiğinde tetiklenir

ng-mouseleave: Mouse üzerinden ayrıldığında tetiklenir



<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body>
<style>
.kutu {width:100px; height:100px;
       background:#ccc; margin:20px;}
</style>
</head>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
  <div class="kutu" ng-mouseenter="f1()" ng-mouseleave="f2()"></div>
  {{durum}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
  uygulama.controller("ngKontrol", function($scope){
    $scope.durum = "Sayfa yüklendi.";
    $scope.f1 = function(){
      $scope.durum = "Element içine girildi.";
    }
    $scope.f2 = function(){
      $scope.durum = "Element içinden çıkıldı.";
    }
  });
</script>
</body>
</html> 



ng-focus: İnputa odaklandığında tetiklenir

ng-blur:İnput dışında bir yere odaklandığında tetiklenir


<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
  İnput: <input type="text" ng-focus="f1()" ng-blur="f2()"/>
  <hr>
  {{durum}}
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
  uygulama.controller("ngKontrol", function($scope){
    $scope.durum = "Sayfa yüklendi!";
    $scope.f1 = function(){
      $scope.durum = "İnput'a focuslandı!";
    }
    $scope.f2 = function(){
      $scope.durum = "İnput dışında!";
    }
  });
</script>
</body>
</html> 



ng-keypress: Tusa basılma durumunu kontrol eder

<html>
<script src = "https://code.angularjs.org/1.5.0/angular.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Bişey gir ,ne kadar giriş yaptıgını saycam</p>
<input type="text" ng-keypress="say()" ng-model="giris" />
<p>{{count}} kadar değişti</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.say = function() {
$scope.count++;
};
}]);
</script>

</body>
</html>



Hiç yorum yok: