Perşembe , 23 Mart 2017
Anasayfa » JavaScript » AngularJS » AngularJS ng-hide & ng-show Yönergesi

AngularJS ng-hide & ng-show Yönergesi

Bu yazıda ng-show ve ng-hide kullanımını örnek üzerinde inceleyeceğiz.

ng-show ve ng-hide yönerleri HTML elementlerinin görüntülenip gizlenmesini kontrol etmek için kullanılır.
Örneğin bir checkbox kotrolü ile personel maaşlarını gösterip gizlemek istiyoruz. Checkbox seçili olduğunda personel maaşları görüntülenecek, checkbox seçimi kaldırıldığında personel maaşları sütünü ekrandan kaldırılacak.

ng-show_ng-hide

SCRİPT:Daha önceki makalelerde anlattığım gibi controller ve modelimizi aşağıda oluşturduk.

 

HTML: HTML belgesini oluştururken dikkat etmemiz gereken gizle ve göster işini yapacak olanın da bir model olmasıdır. Bu yüzden checkbox nesnesindeki ng-model yönergesine maasGizle değerini verdim. Ng-hide içinde de bu model değerini kullanacağım.
Biraz sayfanın çalışmasından bahsedelim. Sayfa ilk yüklendiğinde checkbox seçili olmadığı için maasGizle modelinin değeri false olacaktır.  ng-hide direktifi maasGizle değerine göre  personel maaşları ekrana gösterecektir.
Ne zaman biz checkbox değerini seçili hale getirisek maasGizle $scope ile modele tutturulacak. Ng-hide otomatik olarak maasGizle değerini gördüğü için true değerini üretecek.

Checkbox seçili olduğu içinde maaş sütünü ekranda görünmeyecek. Checkbox’ın onayı kaldırıldığında maasGizle durumu false yapılacak ve ng-hide maaş sütununu ekranda tekrar gösterilecek.

 

HTML & SCRIPT ng-hide için;

ng-show

Yukarıdaki örnekte ng-show direktifini de ng-hide gibi kullanabiliriz.  HTML açıklamasında sayfa ilk yüklendiğinde ng-hide maasGizle modelini görmediği için false değerini ürettiğini söylemiştim. Üretilen bu değerin değil (!) değil yaparak aynı kodları ng-show için kullanabiliriz.

 

Eğer sayfa ilk yüklendiğinde maaş değerini gizlemek ve seçim kutusu onaylandığında göstermek istersek yine aynı yöntemle değilini kaldırarak yapabiliriz.

 

ANGULARJS ÖRNEK UYGULAMA

Hakkında Hayri

İlginizi Çekebilir

AngularJS Route Yapma

Bu yazıda Angularjs route yapma (Angularjs routing) kavramını inceleyeceğiz.  Bu yazı ve bundan sonraki bir …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir