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.
SCRİPT:Daha önceki makalelerde anlattığım gibi controller ve modelimizi aşağıda oluşturduk.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script> var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ { "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": "Erkek","maas": "3569" }, { "isim": "Elfiye","soyisim": "Şencin","cinsiyet": "Erkek","maas": "4143" }, { "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": "Erkek","maas": "2705" }, { "isim": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" }, { "isim": "Çağar","soyisim": "Alkan","cinsiyet": "Kız","maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşer","cinsiyet": "Kız","maas": "3869" }, { "isim": "Süreha","soyisim": "Karakaya","cinsiyet": "Erkek","maas": "1796" }, { "isim": "Taberi","soyisim": "Abacılı","cinsiyet": "Kız","maas": "4054" }, { "isim": "Bala","soyisim": "Merkan","cinsiyet": "Erkek","maas": "2703" }, { "isim": "Nil","soyisim": "Aksaç","cinsiyet": "Erkek","maas": "3510" }, { "isim": "Ulualp","soyisim": "Seziş","cinsiyet": "Erkek","maas": "2688" }, { "isim": "Çağlar","soyisim": "Selçuk atay","cinsiyet": "Erkek","maas": "3524" }, { "isim": "Berkem","soyisim": "Erdoğan","cinsiyet": "Kız","maas": "2290" }, { "isim": "Özgünel","soyisim": "Demirtaş","cinsiyet": "Erkek","maas": "3193" }, { "isim": "Mübelliğ","soyisim": "Ölçer","cinsiyet": "Kız","maas": "3603" } ]; $scope.personeller = personeller; }); </script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<body ng-app="persModul"> <div ng-controller="persController"> <div> Maaş Gizle <input type="checkbox" ng-model="maasGizle"> </div> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>TARİH</th> <th ng-hide="maasGizle" >MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller"> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td ng-hide="maasGizle"> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> |
HTML & SCRIPT ng-hide için;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ { "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": "Erkek","maas": "3569" }, { "isim": "Elfiye","soyisim": "Şencin","cinsiyet": "Erkek","maas": "4143" }, { "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": "Erkek","maas": "2705" }, { "isim": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" }, { "isim": "Çağar","soyisim": "Alkan","cinsiyet": "Kız","maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşer","cinsiyet": "Kız","maas": "3869" }, { "isim": "Süreha","soyisim": "Karakaya","cinsiyet": "Erkek","maas": "1796" }, { "isim": "Taberi","soyisim": "Abacılı","cinsiyet": "Kız","maas": "4054" }, { "isim": "Bala","soyisim": "Merkan","cinsiyet": "Erkek","maas": "2703" }, { "isim": "Nil","soyisim": "Aksaç","cinsiyet": "Erkek","maas": "3510" }, { "isim": "Ulualp","soyisim": "Seziş","cinsiyet": "Erkek","maas": "2688" }, { "isim": "Çağlar","soyisim": "Selçuk atay","cinsiyet": "Erkek","maas": "3524" }, { "isim": "Berkem","soyisim": "Erdoğan","cinsiyet": "Kız","maas": "2290" }, { "isim": "Özgünel","soyisim": "Demirtaş","cinsiyet": "Erkek","maas": "3193" }, { "isim": "Mübelliğ","soyisim": "Ölçer","cinsiyet": "Kız","maas": "3603" } ]; $scope.personeller = personeller; }); </script> </head> <body ng-app="persModul"> <div ng-controller="persController"> <div> Maaş Gizle <input type="checkbox" ng-model="maasGizle"> </div> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>TARİH</th> <th ng-hide="maasGizle" >MAAŞ</th> </tr> </thead> <tbody> <!-- sayfaNo*kayitSayisi-1 şeklideki kullanım sayfalamanın 1-2-3 şekilnde olması için.--> <tr ng-repeat="personel in personeller|limitTo:kayitSayisi:sayfaNo*kayitSayisi-kayitSayisi"> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td ng-hide="maasGizle"> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> </html> |
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.
|
1 2 3 4 5 |
<th ng-show="!maasGizle" >MAAŞ</th> <td ng-show="!maasGizle"> {{ personel.maas }} </td> |
[divider]
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.
|
1 2 3 4 5 6 7 |
Maaş Göster:<input type="checkbox" ng-model="maasGizle"> <th ng-show="maasGizle" >MAAŞ</th> <td ng-show="maasGizle"> {{ personel.maas }} </td> |
[…] Konu 14: AngularJS ng-hide ve ng-show direktifi […]