AngularJS te hiç Javascript kodu yazmadan örnekler vermeye devam ediyorum. Bu yazıda AngularJS’te toggle buton yapımından bahsedicem.
İlk olarak ng-app ımızı sectiona atıyorum ve angular kodu yazacağımı belirtmiş oluyorum.
durum adındaki bir değişkeni 0‘a eşitliyorum. durum değişkeni görünecek divin durumunu belirleyecek.
<section ng-app ng-init="durum = 0">
Sonra butona atadığım click eventine durum =! durum yazıyorum. Butona her tıklandığında şu işlem olacaktır:
Eğer durum 0 ise durum 1 e dönecektir, durum 1 ise durum 0 a dönecektir. Yani tek satırlık kodumuz esasen şudur:
if(durum = 0) durum = 1 elseif(durum = 1) durum = 0 return durum
<button ng-click="durum =! durum"> ... </button>
Şimdi button un içine bakalım:
<span ng-show="durum == 0">Göster</span> <span ng-show="durum == 1">Gizle</span>
Burada basit bir kontrol söz konusu.
ng-show 1’e eşit olduğu durumda özelliği display: block olur. Diğer durumlarda ise display: none dir. Eğer durum 0’a eşit ise Göster yazan spanımız görünüyor işlem bu kadar basit.
Son olarak da yine ng-show ile durumun 1 olduğu zaman divi gösteriyoruz.
<div ng-show="durum">
Tıklandığında görünecek olan div.
</div>
Bunun daha kısa hali var mı derseniz evet var ama örnek biraz karmaşık gelir diye ben bu şekilde yaptım.
Kalın sağlıcakla 🙂