AngularJS ng-click, ng-show & ng-hide Direktifleri ve Örnek

By: James Hartman James Hartman
Hours Güncellenmiş

AngularJS Etkinlikleri

AngularJS Etkinlikleri web uygulamalarının fare tıklaması, klavye girişleri, fareyle üzerine gelme vb. kullanıcı girişleriyle etkileşime girmesine olanak tanıyan işlevlerdir. Belirli görevleri ve eylemleri gerçekleştirmek için olayların web tabanlı uygulamalarda işlenmesi gerekir. Kullanıcı tarafından belirli bir eylem gerçekleştirildiğinde tetiklenir.

Web tabanlı uygulamalar oluştururken, er ya da geç uygulamanızın fare tıklamaları, hareketler, klavye tuşları, değişiklik olayları vb. gibi DOM olaylarını işlemesi gerekecektir.

angularjs bu tür olayları işlemek için kullanılabilecek işlevsellik ekleyebilir.

Örneğin sayfada bir buton varsa ve butona tıklandığında bir şeyler işlemek istiyorsanız Angular ng-click olay direktifini kullanabiliriz.

Bu kurs sırasında Etkinlik direktiflerini ayrıntılı olarak inceleyeceğiz.

AngularJS'de ng-click Yönergesi nedir?

The “ng-tıklama yönergesi” AngularJS'de, HTML'deki bir öğeye tıklandığında özel davranış uygulamak için kullanılır. Bu yönerge normalde düğmeler için kullanılır çünkü bu, kullanıcı tarafından gerçekleştirilen tıklamalara yanıt veren olayların eklenmesinde en yaygın olanıdır. Ayrıca bir düğmeye tıklandığında uyarıların açılması için de kullanılır.

AngularJS'de ng-click sözdizimi

<element
 ng-click="expression">
</element>

Click olayını nasıl uygulayabileceğimize dair basit bir örneğe bakalım.

AngularJS'de ng-click örneği

Bu ng-click Örneğinde, kullanıcı bir düğmeye tıkladığında değeri artan bir sayaç değişkenimiz olacak.

AngularJS'de ng-click Yönergesi
AngularJS'de ng click örneği
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Kod Açıklaması:

  1. İlk olarak yerel değişken count'un değerini 0'a ayarlamak için ng-init direktifini kullanıyoruz.
  2. Daha sonra butona ng-click olay direktifini tanıtıyoruz. Bu direktifte count değişkeninin değerini 1 arttıracak kod yazıyoruz.
  3. Burada count değişkeninin değerini kullanıcıya gösteriyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

AngularJS'de ng-tıklayın

Yukarıdaki çıktıdan,

  • “Arttırma” butonunun görüntülendiğini ve sayım değişkeninin değerinin başlangıçta sıfır olduğunu görebiliriz.
  • Arttırma butonuna tıkladığınızda aşağıdaki çıktı görüntüsünde gösterildiği gibi sayımın değeri buna göre artırılır.

AngularJS'de ng-tıklayın

İLGİLİ MAKALELER

AngularJS'de ng-show Direktifi nedir?

The ng-Show direktifi AngularJS'de belirli bir özelliği göstermek veya gizlemek için kullanılır HTML ng-show niteliğine sağlanan ifadeye dayalı öğe. Arka planda, HTML öğesi, öğeye .ng-hide CSS sınıfının kaldırılması veya eklenmesiyle gösterilir veya gizlenir. Görüntüyü hiçbiri olarak ayarlayan önceden tanımlanmış bir CSS sınıfıdır.

AngularJS'de ng-show'un sözdizimi

<element
 ng-show="expression">
</element>

Arka planda, öğeye .ng-hide CSS sınıfı kaldırılarak veya eklenerek öğe gösterilir veya gizlenir.

AngularJS'de ng-show örneği

Gizli bir öğeyi görüntülemek için “ngshow olayı” direktifini nasıl kullanabileceğimizi gösteren Angular Örnekte bir ng-show'a bakalım.

AngularJS'de ng-show Direktifi

Angular'da ng show örneği
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show = "IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Kod Açıklaması:

  1. Ng-click olay direktifini buton elemanına ekliyoruz. Burada kontrolcümüz DemoController'da tanımlanan “ShowHide” adlı bir fonksiyondan bahsediyoruz.
  2. Angular metnini içeren bir div etiketine ng-show niteliğini ekliyoruz. Bu, ng-show niteliğine göre göstereceğimiz/gizleyeceğimiz etikettir.
  3. Controller’da “IsVisible” üye değişkenini kapsam nesnesine ekliyoruz. Bu özellik, div kontrolünün görünürlüğünü kontrol etmek için ng-show angular özelliğine (adım#2) aktarılacaktır. Sayfa ilk görüntülendiğinde div etiketinin gizlenmesi için başlangıçta bunu false olarak ayarlıyoruz. Not: - Ng-show öznitelikleri true olarak ayarlandığında, bizim durumumuzda div etiketi olan sonraki kontrol kullanıcıya gösterilecektir. Ng-show niteliği false olarak ayarlandığında kontrol kullanıcıdan gizlenecektir.
  4. AngularJS show hide div on click etiketinin kullanıcıya gösterilebilmesi için IsVisible üye değişkenini true olarak ayarlayacak ShowHide fonksiyonuna kod ekliyoruz.

AngularJS'de ng-show ve ng-hide kodları başarılı bir şekilde yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı: 1

AngularJS'de ng-show Direktifi

Çıktıdan,

  • Başlangıçta “AngularJS” metnini içeren div etiketinin gösterilmediğini görebilirsiniz ve bunun nedeni, isVisible kapsam nesnesinin başlangıçta false olarak ayarlanması ve daha sonra div etiketinin ng-show yönergesine iletilmesidir.
  • “AngularJS'yi Göster” butonuna tıkladığınızda isVisible üye değişkeni true olacak şekilde değişir ve dolayısıyla “Angular” metni kullanıcıya görünür hale gelir. Aşağıdaki çıktı kullanıcıya gösterilecektir.

AngularJS'de ng-show Direktifi

Çıktı artık Angular metniyle birlikte div etiketini gösteriyor.

AngularJS'de ng-hide Direktifi nedir?

The ng-hide yönergesi AngularJS'de, ifade DOĞRU ise bir öğenin gizleneceği bir işlevdir. İfade YANLIŞ ise öğe gösterilecektir. Arka planda, öğeye .ng-hide CSS sınıfı kaldırılarak veya eklenerek öğe gösterilir veya gizlenir.

AngularJS'de ng-hide'ın sözdizimi

<element
 ng-hide="expression">
</element>

Öte yandan ng-hide ile ifade doğruysa öğe gizlenir, yanlışsa gösterilir.

AngularJS'de ng-hide örneği

Ng-hide ve ng-show niteliklerinin nasıl kullanılabileceğini göstermek için ngShow için gösterilene benzer ng-hide Örneğine bakalım.

AngularJS'de ng-hide Direktifi

AngularJS'de ng-hide örneği
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Kod Açıklaması:

  1. Ng-click olay direktifini buton elemanına ekliyoruz. Burada, denetleyicimiz DemoController'da tanımlanan ShowHide adlı bir işleve atıfta bulunuyoruz.
  2. Angular metnini içeren bir div etiketine ng-hide özelliğini ekliyoruz. Bu, ng-show niteliğine dayalı olarak Angular'da hide'yi göstermek için kullanacağımız etikettir.
  3. Controller'da isVisible üye değişkenini kapsam nesnesine ekliyoruz. Bu özellik, div kontrolünün görünürlüğünü kontrol etmek için ng-show angular özelliğine aktarılacaktır. Sayfa ilk görüntülendiğinde div etiketinin gizlenmesi için başlangıçta bunu false olarak ayarlıyoruz.
  4. Div etiketinin kullanıcıya gösterilebilmesi için IsVisible üye değişkenini true olarak ayarlayacak ShowHide fonksiyonuna kod ekliyoruz.

ng show hide kodu başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki çıktı gösterilecektir.

Çıktı:

AngularJS'de ng-hide Direktifi

Çıktıdan,

  • Başlangıçta, "AngularJs" metnini içeren div etiketinin, false'un özellik değeri ng-hide yönergesine gönderildiği için gösterildiğini görebilirsiniz.
  • “Açısalları Gizle” butonuna tıkladığımızda true özelliğinin değeri ng-hide yönergesine gönderilecektir. Dolayısıyla, “Açısal” kelimesinin gizleneceği aşağıdaki çıktı gösterilecektir.

AngularJS'de ng-hide Direktifi

AngularJS Olay Dinleyici Yönergeleri

Bunlardan birini veya birkaçını kullanarak AngularJS olay dinleyicilerini HTML öğelerinize ekleyebilirsiniz. direktifler:

  • bulanıklık
  • ng-değişim
  • ng-tıklama
  • ng-kopya
  • kesilmiş
  • ng-dblclick
  • ng-odak
  • ng-tuş aşağı
  • ng tuşuna basma
  • ng-keyup
  • fare aşağı
  • ng-fare girişi
  • ng-fare yaprağı
  • fare hareketi
  • fareyle üzerine gelme
  • ng-fare-up
  • ng-yapıştır

ÖZET

  • Olay direktifleri, Angular'da, düğme tıklamaları, klavye ve fare tıklamaları vb. gibi kullanıcı müdahalesi tarafından oluşturulan olaylara yanıt vermek üzere özel kod eklemek için kullanılır.
  • En yaygın olay yönergesi, tıklama olaylarını işlemek için kullanılan AngularJS ng-click yönergesidir. Bunun en yaygın kullanımı AngluarJS düğmelerinin tıklatılması içindir; burada bir düğme tıklamasına yanıt vermek için kod eklenebilmektedir.
  • HTML öğeleri aynı zamanda kullanıcıya buna göre gizlenebilir veya gösterilebilir. AngularJS ng-show Direktifi, Açısal ng-hide Direktifi ve ng-görünür nitelikler.

Beğenebilirsin: