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 🙂